文本框输入效果总结

文本框输入效果

---

简单的罗列了几个文本框输入后的效果;话不多说，直接上代码：

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" />

2、选中后方可编辑：

<input type="checkbox" name="tpbox" value="1" id="hydb1">选中这边编辑
<input type="text" name="txtNo" size="30" value="选中前面的选项方可编辑" edit()>

<script>
function edit(val) {
    if (val) {
        C.disabled = false;
    } else {
        document.getElementById("hydb1").disabled = true;
    }
}
</script>

3、点击链接后方可编辑：

<a href="#" onclick="username.readOnly=false;alert('你好，欢迎使用！')">先点击我哦！</a> 你的姓名：
<input id="username" value="--请输入--" size="30" readOnly> </br>

4、输入框从中间输入：从中间输入：

<input type="text " name="mid " style="text-align:center; "> </br>

6、输入框只能输入数字（用的是正则表达式）：你 的年龄：

<input onkeyup="value=value.replace(/[^\d]/g, '') " onbeforepaste="clipboardData.setData( 'text',clipboardData.getData( 'text').replace(/[^\d]/g, '')) ">

7、输入框只能输入中文（用的是正则表达式）：你的中文名：

<input onkeyup="value=value.replace(/[ -~]/g, '') " onkeydown="if(event.keyCode==13)event.keyCode=9 "> <

8、只能输入英文和数字（用的是正则表达式）： 你 的昵称：

<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 ">

9、输入框不能编辑，但表单可以获得输入框内的值：

<input type="text " value="afreon " onclick="alert( '总和不能编辑！'); " onfocus="this.blur() " /> </br>
<input type="text " value="afreon " onclick="alert(this.value); " readonly /> </br>
<input value="不可修改 " readonly="true " type="text "
/>//:字体颜色为黑体

10、输入框不能编辑，并且表单不能获得输入框内的值

<input value="不可修改 " disabled="disabled " type="text " />//:字体颜色为灰体 </br>11、输入框禁止输入法： </br>
<input onpaste="return false " style="ime-mode:disabled ">

以上代码部门引用这位大哥的博客

持续更新…..