input的属性值和一些综合实例

1.取消按钮按下时的虚线框,在input里添加属性值 hideFocus 或者 HideFocus=true 
<input type="submit" value="提交" hidefocus="true" /> 

2.只读文本框内容,在input里添加属性值 readonly 
<input type="text" readonly /> 

3.防止退后清空的TEXT文档(可把style内容做做为类引用) 
<input type="text" style="behavior:url(#default#savehistory);" /> 

4.ENTER键可以让光标移到下一个输入框 
<input type="text" onkeydown="if(event.keyCode==13)event.keyCode=9" /> 

5.只能为中文(有闪动) 
<input type="text" onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9" /> 

6.只能为数字(有闪动) 
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" /> 

7.只能为数字(无闪动) 
<input type="text" style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9" onkeypress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false" /> 

8.只能输入英文和数字(有闪动) 
<input type="text" onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" /> 

9.屏蔽输入法 
<input type="text" name="url" style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9" /> 

10. 只能输入 数字，小数点，减号（-） 字符(无闪动) 
<input onkeypress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false" /> 

11. 只能输入两位小数，三位小数(有闪动) 
<input type="text" maxlength="9" onkeyup="if(value.match(/^\d{3}$/))value=value.replace(value,parseInt(value/10)) ;value=value.replace(/\.\d*\./g,'.')" onkeypress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 || value.match(/^\d{3}$/) || /\.\d{3}$/.test(value)) {event.returnValue=false}" />

属性值

<input>:

1.在文件上传中使用 accept 属性，本例中的输入字段可以接受 GIF 和 JPEG 两种图像：

<form>
  <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

2.accesskey

定义和用法

accessKey 属性设置或返回 checkbox 的快捷键。

注释：请使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点。

语法

checkboxObject.accessKey=accessKey

3.alt\align

下面的表单拥有两个输入字段以及一个图像形式的提交按钮：

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="image" src="submit.jpg" alt="Submit" align="right" />
  <p>This is some text This is some text This is some text.</p>
</form>

alt 属性只能与 <input type="image"> 配合使用。它为图像输入规定替代文本。

align 属性只能与 <input type="image"> 配合使用。它规定图像输入相对于周围其他元素的对齐方式。

浏览器支持

只有 "left" 和 "right" 值得到所有浏览器的支持。

4.dir 定义(文字)的排列方式 
 ltr -- 代表左到右的排列方式 
 rtl -- 代表右到左的排列方式 
 cache字面上是缓存的意思,不过我从来没见过这么用

5.tabIndex是选择索引,就是页面上按Tab键切换的顺序

6.usemap

客户器端图像映射：

<img src="planets.gif" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a>
  <area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a>
  <area href="venus.htm" shape="circle" coords="180,139,14">Venus</a>
</map>

解释

上面这段源代码将一幅图像 planets.gif 映射为 3 个区域，当用户单击其中某一个区域时，将被链接到不同的文档中。

 

 

7.size 和 maxlength

   maxlength="5",则input输入框中只能够输入5个字符;

   size="5"，表示input输入框只显示5个可见的字符，但你可以输入'无数'多字符内容

8. title
   弹出提示框