如题所述
htmlä¸æ·»å è¾å ¥æ¡ç使ç¨çinputæ ç¾ï¼åºæ¬çå®ä¹åç¨æ³å¦ä¸ï¼
<input> æ ç¾ç¨äºæéç¨æ·ä¿¡æ¯ãæ ¹æ®ä¸åç type å±æ§å¼ï¼è¾å ¥å段æ¥æå¾å¤ç§å½¢å¼ãè¾å ¥å段å¯ä»¥æ¯ææ¬å段ãå¤éæ¡ãæ©ç åçææ¬æ§ä»¶ãåéæé®ãæé®ççã
å·¥å ·åæï¼ç¼è¾å¨ãæµè§å¨
1ãå建ä¸ä¸ªç®åçinputæ ç¾å®ç°ç½é¡µä¸çè¾å ¥æ¡ææï¼ä»£ç å¦ä¸ï¼
First name: <input type="text" name="fname" />Last name: <input type="text" name="lname" />
<input type="submit" value="Submit" />
2ã以ä¸ä»£ç ä¸type=textæ¯ææ¬çè¾å
¥æ¡ï¼type=submitæ¯ä¸ä¸ªæ交æé®ï¼è¿è¡çææå¦ä¸å¾ï¼
创建一个简单的input标签实现网页上的输入框效果。
添加输入框的步骤如下:
<input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、、掩码后的文本控件、单选按钮、按钮等等。
工具:编辑器、浏览器
1、创建一个简单的input标签实现网页上的输入框效果,代码如下:
1 First name: <input type="text" name="fname" />2 Last name: <input type="text" name="lname" />3 <input type="submit" value="Submit" />
2、以上代码中type=text是文本的输入框,type=submit是一个提交按钮,运行的效果如下图:
添加多个输入框的方法如下:
<input id="input_template" name="name" maxlength="7" type="text" style="width: 120px;">
<!-- 这里是一个模版,追加的时候用来克隆的。 -->
$('#addBtn').bind('click', function() {
var input_ = $("#input_template").clone();
$("#input_container").append(input_);
});
<!-- 需要注意的是,在追加的时候,或者追加之后,把追加元素imput的name和id重置一下。 -->
在input里添加属性值 hideFocus 或者 HideFocus=true
2.只读文本框内容
在input里添加属性值 readonly
3.防止退后清空的TEXT文档(可把style内容做做为类引用)
<INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput>
4.ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9" >
5.只能为中文(有闪动)
<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9">
6.只能为数字(有闪动)
<input onkeyup="value=value.replace(/[^/d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">
7.只能为数字(无闪动)
<input 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 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 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}" id=text_kfxe name=text_kfxe>