xmlplus中如何实现文本框TextBox-创新互联

这篇文章主要介绍了xmlplus中如何实现文本框TextBox，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

目前创新互联建站已为上千多家的企业提供了网站建设、域名、网页空间、网站托管、服务器托管、企业网站设计、迪庆州网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

文本框是页面中最常用的输入组件，它的默认使用方式如下：

当然，这里的 `type='text' 可以略去不写。大部分情况下，使用默认的文本框作为输入组件是没什么问题的，但在具体的项目中，难免会有功能扩展的需求。这里仅以如何增加文本框数据的格式化输入输出能力为例说明如何扩展原生的文本框组件。除了本章的内容，你也可以参考官方文档中的参数映射一章。

目标组件的功能分析

对于原生的文本框，我们获取到的值是文本类型的，就像下面的示例所展示的：

Example: {
  xml: "",
  fun: function (sys, items, opts) {
    console.log(typeof this.prop("value")); // string
  }
}

如果需要其它类型的数值，就需要对获取到的数据进行格式化操作。比如，如果需要整型数，就需要用到 parseInt 函数；如果需要浮点型数，就需要用到 parseFloat 函数。如果我们能够将格式化数据的操作封装起来，那使用起来一定会相当的方便。为了明确我们的预期，不妨先给出目标组件的使用示例。

Index: {
  xml: "\
       \
       \

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

此示例实例化了两个组件 Input。组件 Input 允许接收一个 format 参数作为其静态接口输入，并提供一个属性 value 作为其动态输入输出接口。format 参数有三种可能的值：string (默认)、int 以及 float。这三种值分别对应三种数据类型：字符串型、整型和浮点型。属性 value 根据 format 的值来进行格式化输入输出。示例的输出结果应该会是下面这样子：

hello, world
227

目标组件的实现

为了完成上面的目标组件，我们先给出一个文本框的组件框架。

TextBox: {
  xml: "",
  opt: { format: "string" },
  fun: function (sys, items, opts) {
    var parse = {"int": parseInt, "float": parseFloat, "string": String}[opts.format];
    function getValue() {
      // 这里需要获取 input 的值并根据 opts.format 值选择适当的格式化函数，
    }
    function setValue(value) {
      // 这里需要根据 opts.format 值选择适当的格式化函数，对 value 进行格式化后同去赋值
    }
    return Object.defineProperty({}, "value", { get: getValue, set: setValue });
  }
}

上面关键的地方在于格式化函数的选取，为了简单化，我们采用的是表查询方式。在组件初始化阶段该函数就已经准备就绪了，上述的 parse 函数即所需的格式化函数。不过需要注意的是，该组件的格式化函数类型在组件初始化时就固定了。如果需要可变的格式化函数，你需要对组件做些修正。好了，下面可以给出完整的的文本框组件了。

TextBox: {
  xml: "",
  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 });
  }
}

另外请注意，上面组件添加了部分属性映射的内容，这可以在具体的项目中根据需要进行增删。

感谢你能够认真阅读完这篇文章，希望小编分享的“xmlplus中如何实现文本框TextBox”这篇文章对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站建设公司行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前标题：xmlplus中如何实现文本框TextBox-创新互联
链接URL：http://cqcxhl.cn/article/ddscig.html

重庆分公司，新征程启航

xmlplus中如何实现文本框TextBox-创新互联

其他资讯