首页 web前端 js教程 JavaScript框架(xmlplus)组件的介绍(三)文本框(TextBox)

JavaScript框架(xmlplus)组件的介绍(三)文本框(TextBox)

May 04, 2017 am 10:21 AM
文本框

xmlplus 是一个JavaScript框架,用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之文本框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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


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

目标组件的功能分析

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

Example: {
  xml: "<input id=&#39;input&#39; value=&#39;text&#39;/>",
  fun: function (sys, items, opts) {
    console.log(typeof this.prop("value")); // string
  }
}
登录后复制

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

Index: {
  xml: "<p id=&#39;index&#39;>\
       <TextBox id=&#39;foo&#39;/>\
       <TextBox id=&#39;bar&#39; format=&#39;int&#39;/>\
     </p>",
  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: "<input id=&#39;input&#39; type=&#39;text&#39;/>",
  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: "<input id=&#39;input&#39; type=&#39;text&#39;/>",
  opt: { format: &#39;string&#39; },
  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 框架。如果你对 xmlplus 没有多少了解,可以访问 www.xmlplus.cn。这里有详尽的入门文档可供参考。

以上是JavaScript框架(xmlplus)组件的介绍(三)文本框(TextBox)的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

OneNote如何设置图片为背景 OneNote如何设置图片为背景 May 14, 2023 am 11:16 AM

Onenote是Microsoft提供的最好的笔记工具之一。结合Outlook和MSTeams,Onenote可以成为提高工作和个人创意工作效率的强大组合。我们必须以不同的格式做笔记,这可能不仅仅是把事情写下来。有时我们需要从不同来源复制图像并在日常工作中进行一些编辑。如果知道如何应用更改,则粘贴在Onenote上的图像可以发挥很大作用。您在使用Onenote时是否遇到过粘贴在Onenote上的图像无法让您轻松工作的问题?本文将着眼于在Onenote上有效地使用图像。我们可

如何隐藏文本直到在 Powerpoint 中单击 如何隐藏文本直到在 Powerpoint 中单击 Apr 14, 2023 pm 04:40 PM

如何在 PowerPoint 中的任何点击之前隐藏文本如果您希望在单击 PowerPoint 幻灯片上的任意位置时显示文本,那么设置起来既快速又容易。要在 PowerPoint 中单击任何按钮之前隐藏文本:打开您的 PowerPoint 文档,然后单击“插入 ”菜单。单击新幻灯片。选择空白或其他预设之一。仍然在插入菜单中,单击文本框。在幻灯片上拖出一个文本框。单击文本框并输入您

如何在 Word 中制作日历 如何在 Word 中制作日历 Apr 25, 2023 pm 02:34 PM

如何使用表格在Word中制作日历如果您想创建一个完全符合您的规范的日历,您可以使用Word中的表格从头开始做所有事情。这使您可以为日历设计所需的确切布局。在Word中使用表格创建日历:打开一个新的Word文档。按Enter几次,将光标向下移动到页面。单击插入 菜单。在功能区中,单击表格图标。单击并按住左上角的方块并拖出一个7×6的表格。在第一行填写星期几。使用另一个日历作为参考填写月份中的日期。突出显示当前月份之外的任何日期。在主菜单中,单击文本颜色图标并选择灰色。对当前月份以

html文本框类型有哪些 html文本框类型有哪些 Oct 12, 2023 pm 05:38 PM

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

如何在HTML文本框中添加换行符? 如何在HTML文本框中添加换行符? Sep 04, 2023 am 11:05 AM

要向HTML文本区域添加换行符,我们可以使用HTML换行符标签在任意位置插入换行符。或者,我们也可以使用CSS属性“white-space:pre-wrap”自动为文本添加换行符。当在文本区域中显示预先格式化的文本时,这特别有用。因此,我们来讨论一下添加换行符的方法。方法在HTML中创建一个文本区域并为其分配一个id。创建一个按钮,单击该按钮将使用换行符分割文本区域的文本。现在创建将文本分成换行符的函数。该函数的代码为-functionreplacePeriodsWithLineBreaks()

如何编写HTML滚动条文本框代码 如何编写HTML滚动条文本框代码 Feb 19, 2024 pm 07:38 PM

标题:如何编写带滚动条的HTML文本框代码HTML中的文本框是常用的用户输入控件之一,在某些情况下,文本内容过长时会导致文本框显示不完整。这时,我们可以通过添加滚动条来让文本框支持滚动查看。本文将详细介绍如何编写带滚动条效果的HTML文本框代码,并给出具体的代码示例。一、使用textarea元素创建文本框在HTML中,我们使用textarea元素来创建文本框

html怎么对齐文本框 html怎么对齐文本框 Mar 27, 2024 pm 04:33 PM

html对齐文本框的方法:1、文本对齐;2、使用Flexbox布局对齐;3、使用Grid布局对齐;4、使用margin或position进行微调。

文本框边框怎么设置颜色 文本框边框怎么设置颜色 Jul 28, 2023 am 10:08 AM

设置文本框边框颜色的方法:1、选中要添加边框的文本或段落;2、在“开始”选项卡的“段落”或“字体”组中,单击“边框”按钮;3、从下拉菜单中选择一个边框样式;4、单击“边框颜色”按钮,在弹出的菜单中选择您想要的颜色;5、单击“确定”按钮以应用边框样式和颜色。

See all articles