這篇文章主要介紹了xmlplus中如何實(shí)現(xiàn)文本框TextBox，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

目前創(chuàng)新互聯(lián)建站已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、迪慶州網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

文本框是頁(yè)面中最常用的輸入組件，它的默認(rèn)使用方式如下：

<input type='text'/>

當(dāng)然，這里的 `type='text' 可以略去不寫(xiě)。大部分情況下，使用默認(rèn)的文本框作為輸入組件是沒(méi)什么問(wèn)題的，但在具體的項(xiàng)目中，難免會(huì)有功能擴(kuò)展的需求。這里僅以如何增加文本框數(shù)據(jù)的格式化輸入輸出能力為例說(shuō)明如何擴(kuò)展原生的文本框組件。除了本章的內(nèi)容，你也可以參考官方文檔中的 參數(shù)映射 一章。

目標(biāo)組件的功能分析

對(duì)于原生的文本框，我們獲取到的值是文本類(lèi)型的，就像下面的示例所展示的：

Example: {
  xml: "<input id='input' value='text'/>",
  fun: function (sys, items, opts) {
    console.log(typeof this.prop("value")); // string
  }
}

如果需要其它類(lèi)型的數(shù)值，就需要對(duì)獲取到的數(shù)據(jù)進(jìn)行格式化操作。比如，如果需要整型數(shù)，就需要用到 parseInt 函數(shù)；如果需要浮點(diǎn)型數(shù)，就需要用到 parseFloat 函數(shù)。如果我們能夠?qū)⒏袷交瘮?shù)據(jù)的操作封裝起來(lái)，那使用起來(lái)一定會(huì)相當(dāng)?shù)姆奖?。為了明確我們的預(yù)期，不妨先給出目標(biāo)組件的使用示例。

Index: {
  xml: "<div id='index'>\
       <TextBox id='foo'/>\
       <TextBox id='bar' format='int'/>\
     </div>",
  fun: function (sys, items, opts) {
    items.foo.value = "hello, world";
    items.bar.value = 27.1828;
    console.log("foo", items.foo.value);
    console.log("bar", items.bar.value);
  }
}

此示例實(shí)例化了兩個(gè)組件 Input。組件 Input 允許接收一個(gè) format 參數(shù)作為其靜態(tài)接口輸入，并提供一個(gè)屬性 value 作為其動(dòng)態(tài)輸入輸出接口。format 參數(shù)有三種可能的值：string (默認(rèn))、int 以及 float。這三種值分別對(duì)應(yīng)三種數(shù)據(jù)類(lèi)型：字符串型、整型和浮點(diǎn)型。屬性 value 根據(jù) format 的值來(lái)進(jìn)行格式化輸入輸出。示例的輸出結(jié)果應(yīng)該會(huì)是下面這樣子：

hello, world
227

目標(biāo)組件的實(shí)現(xiàn)

為了完成上面的目標(biāo)組件，我們先給出一個(gè)文本框的組件框架。

TextBox: {
  xml: "<input id='input' type='text'/>",
  opt: { format: "string" },
  fun: function (sys, items, opts) {
    var parse = {"int": parseInt, "float": parseFloat, "string": String}[opts.format];
    function getValue() {
      // 這里需要獲取 input 的值并根據(jù) opts.format 值選擇適當(dāng)?shù)母袷交瘮?shù)，
    }
    function setValue(value) {
      // 這里需要根據(jù) opts.format 值選擇適當(dāng)?shù)母袷交瘮?shù)，對(duì) value 進(jìn)行格式化后同去賦值
    }
    return Object.defineProperty({}, "value", { get: getValue, set: setValue });
  }
}

上面關(guān)鍵的地方在于格式化函數(shù)的選取，為了簡(jiǎn)單化，我們采用的是表查詢(xún)方式。在組件初始化階段該函數(shù)就已經(jīng)準(zhǔn)備就緒了，上述的 parse 函數(shù)即所需的格式化函數(shù)。不過(guò)需要注意的是，該組件的格式化函數(shù)類(lèi)型在組件初始化時(shí)就固定了。如果需要可變的格式化函數(shù)，你需要對(duì)組件做些修正。好了，下面可以給出完整的的文本框組件了。

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 });
  }
}

另外請(qǐng)注意，上面組件添加了部分屬性映射的內(nèi)容，這可以在具體的項(xiàng)目中根據(jù)需要進(jìn)行增刪。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“xmlplus中如何實(shí)現(xiàn)文本框TextBox”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站jinyejixie.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)名稱(chēng)：xmlplus中如何實(shí)現(xiàn)文本框TextBox-創(chuàng)新互聯(lián)
文章源于：http://jinyejixie.com/article6/ddscig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、服務(wù)器托管、網(wǎng)站設(shè)計(jì)公司、做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)