xmlplus 组件设计系列之三 - 文本框（TextBox）

文本框

文本框是页面中最经常使用的输入组件，这一章就来看看各类文本框组件的设计与使用。

<img src="http://xmlplus.cn/img/textbox.png" class="img-responsive"/>

原生的文本框

原生的文本框组件很是简单，它只包含一个 input 元素，下面是它的一个使用示例。

// 03-01
Index: {
    xml: "<input id='index' type='text'/>",
    fun: function (sys, items, opts) {
        sys.index.on("input", e => {
            console.log(sys.index.prop("value"));
        });
    }
}

对于组件对象文本的设置与获取，你须要使用系统函数 prop，而不能使用 attr，这与 JQuery 的相关接口的用法是一致的。

使用 Bootstrap 样式

Bootstrap 框架提供了很多输入框组的样式，与上一章同样，咱们也能够经过封装以简化对它们使用。下面是一个简单的例子。

// 03-02
TextBox: {
    xml: `<div class="input-group">
              <span class="input-group-addon">https://example.com/users/</span>
              <input id="input" class="form-control" aria-describedby="basic-addon3">
          </div>`,
    fun: function (sys, items, opts) {
        return sys.input;
    }
}

该示例封装了一个容许输入 URL 剩余部分的网址输入框。注意，咱们须要在函数项中导出原始文本框对象的系统接口，这样才能方便地对其进行后续操做。

具备格式化功能的文本框

在官方文档中的 参数映射 的相关内已经讲过如何自定义一个能够进行格式化输入输出的文本框，现将已定义的文本框组件从新列出以下：

// 03-03
TextBox: {
    xml: "<input id='input' type='text'/>",
    opt: { format: 'string' },
    map: { attrs: { input: "disabled value placeholder readonly" } },
    fun: function (sys, items, opts) {
        var parse = {"int": parseInt, "float": parseFloat, "string": String}[opts.format];
        function getValue() {
            return parse(sys.input.prop("value"));
        }
        function setValue(value) {
            sys.input.prop("value", parse(value));
        }
        return Object.defineProperty({}, "value", { get: getValue, set: setValue });
    }
}

自定义文本框的基本思路是封装原生的文本框组件并对其进行扩展，上面给出的文本框增长了原文本框的格式化输入输出能力。上一节给出的使用 Bootstrap 样式封装的文本框本质上也能够归类为自定义文本框的一种，只是它利用了第三方的内容。

带有选择定位文本功能的文本框

这一节咱们来看一个带有选择文本功能的文本框组件。该组件包含两个接口，其中 select 用于选中指定开头和结尾的文本，focus 则用于控制光标的位置。

// 03-04
TextBox: {
    xml: "<input id='input' type='text'/>",
    map: { attrs: { input: "disabled value placeholder readonly" } },
    fun: function (sys, items, opts) {
        var e = sys.input.elem();
        function select(start, end){
            start == undefined && (start = 0);
            end == undefined && (end = e.value.length);
            e.focus();
            e.setSelectionRange(start,end);
        }
        function focus(ptr) {
            ptr == undefined && (ptr = e.value.length);
            return select(ptr, ptr);
        }
        return {focus: focus, select: select};
    }
}

你能够尝试着使用 xmlplus 的继承特性把上一节的组件功能与这一节的组件功能整合在一块儿。这样你就会获得一个既具有格式化功能，又具有便捷的选择文本与控制光标功能的文本框组件了。