文本框

CreateTime--2017年4月24日10:40:40

Author:Marydon

一、文本框

　　（一）標簽

　　　　<input type="text"/>

　　（二）通過下拉列表框實現對文本框的錄入內容控制

　　　　第一部分：HTML

信息是否完整 <select id="" name="" class="" onchange="contrlContent(this);" style="cursor: pointer;"><option value="0" selected>是</option><option value="1">否</option> </select> <br/>需要補充的信息： <input type="text" value="無" name="" id="addMess" readonly/>

　　　　第二部分：javascript

/*** 信息是否完整選項錄入信息控制* @param {Object} obj* input標簽對象*/ function contrlContent (obj) {var seleTag = document.getElementById('addMess');if (1 == obj.value) {seleTag.value='';seleTag.readOnly = false;seleTag.focus();//聚焦} else if (0 == obj.value && '' == seleTag.value) {seleTag.value='無';seleTag.readOnly = true;} else if (0 == obj.value && '' != seleTag.value) {if (confirm('確定要清除嗎？')) {seleTag.value='無';seleTag.readOnly = true;return;}//信息不完整選項選中“否”obj[1].selected = true;seleTag.focus();//聚焦 } }

　　　　注意：一定要注意readOnly大小寫！！！

　　CreateTime--2016年10月24日15:17:17?　　

　　（三）文本框輸入內容控制

　　　　1.3.1 控制錄入的最多是保留兩位小數的數字?　　

<input type="text" onkeyup="this.value=this.value.match(/\d+(\.\d{0,2})?/)||[''])[0]" />

　　　　UpdateTime--2016年12月17日22:02:18　　

　　　　1.3.2 控制不能錄入中文，這里只能使用onkeyup屬性，原因見onkeydown-onkeypress-onkeyup文件?

<input type="text" onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/g,'')"/>　　　

　　　　UpdateTime--2016年12月17日23:10:36
　　　　1.3.3 禁用粘貼
　　　　　　input文本框添加屬性 οnpaste="return false;"

<input type="text" onpaste="return false;"/>

　　　　?UpdateTime--2017年9月28日11:41:11

　　　　1.3.4 文本框設置提示信息（聚焦時，提示信息消失）

　　　　方法一：（推薦使用）?

　　　　使用placeholder屬性

<input type="text" placeholder="請輸入要下載的url地址..."/>　　　　

　　　　局限性：IE9及以下版本不支持該屬性

　　　　方法二：

　　　　通過js實現

<input type="text" onblur="if(this.value==''){this.value='請輸入要下載的url地址...';this.style.color='#8B0016';}" onfocus="if(this.value=='請輸入要下載的url地址...'){this.value='';this.style.color='#000';}" value="請輸入要下載的url地址..." style="color:#8B0016;"/>

?　　　　局限性：該文本框的默認值不是空值

?

?相關推薦：

• 類似文章

?

轉載于:https://www.cnblogs.com/Marydon20170307/p/6755715.html

總結

以上是生活随笔為你收集整理的文本框input:text的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。