<input/>文本输入框效果:

1、选中去除文本框文字,离开后显示原有文字:
<input name="key" type="text" id="key" value="关键词" size="30" onmouseover=this.focus();this.select(); onclick="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999" /><br/>
2、输入框从中间输入:从中间输入:
<input type="text" name="mid" style="text-align:center;"/><br/>

3、输入框变色:输入框改变变色:
<input type="text" size="20" style="background-color:#FFFFFF" onfocus="style.backgroundColor='#FFFF00'" onblur="style.backgroundColor='#FFFFFF'"><br/>

4、输入框只能输入数字(用的是正则表达式):你 的年龄:
<input onkeyup="value=value.replace(/[^d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"/><br/>

5、输入框只能输入中文(用的是正则表达式):你的中文名:
<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9"/><br/>

6、只能输入英文和数字(用的是正则表达式):
你 的昵称:<input onkeyup="value=value.replace(/[W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))" onkeydown="if(event.keyCode==13)event.keyCode=9"/>

原文地址:https://www.cnblogs.com/liuting1314521/p/6541840.html