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 的繼承特性把上一節的組件功能與這一節的組件功能整合在一塊兒。這樣你就會獲得一個既具有格式化功能，又具有便捷的選擇文本與控制光標功能的文本框組件了。