表单[中]:定制input成分

我们经常会要求用户在文本框中输入特定的数据,或者输入特定格式的数据。例如,必须包含某些
字符,或者必须匹配某种模式。由于文本框在默认情况下没有提供多少验证数据的手段,因此必须使用
JavaScript 来完成此类过滤输入的操作。而综合运用事件和 DOM 手段,就可以将普通的文本框转换成能
够理解用户输入数据的功能型控件。 

可以对input属性进行配置,改变其收集用户数据的方式。要配置input元素需要用到其type属性。

下列代码只允许用户输入数值:

在HTML5中type属性的值有23种(阿西吧)。在将type属性设置为想要的值之后,input属性又有一些额外的属性可供使用。

金沙js333娱乐场 1金沙js333娱乐场 2

input元素一共有30个属性,其中许多属性只能与特定的type属性值搭配使用。

1 EventUtil.addHandler(textbox, "keypress", function(event){
2 event = EventUtil.getEvent(event);
3 var target = EventUtil.getTarget(event);
4 var charCode = EventUtil.getCharCode(event);
5 if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 &&
6 !event.ctrlKey){
7 EventUtil.preventDefault(event);
8 }
9 });

View Code

1. 用input元素输入文字

金沙js333娱乐场,type属性值为text的input元素在浏览器中显示为一个单行文本框。这也是input元素缺省type属性时的默认形式。


 

1.1 设定元素大小

有两个属性能够对文本框的大小产生影响:

  • maxlength属性设定了用户能够输入的字符的最大数目。用户输入超过这个数目的字符时,多出的字符会被忽略。
  • size属性设定了文本框能够显示的字符数目。

注意:

  • size 属性不会限制用户输入的字符数量。
  • 这两个属性会影响 单行文本框的宽度,但是具体宽度由浏览器自行决定。

 

1.2 设置初始值和占位式提示

设计者可以使用 value 属性设置文本框的默认值,还可以用 placeholder
属性设置一段提示文字,告诉用户输入什么类型的数据。

<p>
    <label for="sample1">示例1: <input type="text" id="sample1" value="默认值"></label>
</p>
<p>
    <label for="sample2">示例2: <input type="text" id="sample2" placeholder="请输入字符串"/></label>
</p>

注意,使用button元素重置表单时,并不是将文本框中的内容清空,而是恢复至默认值和占位提示。


 

1.3 生成只读或被禁用的文本框

readonlydisabled
属性都可以用来生成用户不能编辑的文本框,其结果的外观不同。

readonly属性不会改变文本框的外观,而设置了disabled属性的文本框,其外观会发生变化(灰色)。

另外,设置了 disabled
属性的input元素的数据不会提交到服务器,而设置成readonly属性的input元素则会被提交。


2. 用input元素输入密码

type属性被设置为password的input元素用于输入密码。用户输入的密码在这种文本框中显示为星号(*)之类的掩饰字符。

当type属性为password时,input元素可用的常见属性还有:size、maxlength、placeholder、readonly、value。其作用与单行文本框一样。


发表评论

电子邮件地址不会被公开。 必填项已用*标注