动力节点首页 全国咨询热线:400-8080-105

绑定手机号,登录
手机号

验证码

微信登录
手机号登录
手机号

验证码

微信登录与注册
微信扫码登录与注册

扫码关注微信公众号完成登录与注册
手机号登录
首页 > 文章

HTML输入框的一些总结

06-30 12:25 767浏览
举报 T字号
  • 大字
  • 中字
  • 小字

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" 
onclick="if(this.checked) {txtNo.disabled=false}else{txtNo.disabled=true}">
你一定要幸福,我会好好的!你的姓名:
<input type="text" name="txtNo" size="20" value="选中前面的选项方可编辑" disabled>

3.点击链接后方可编辑:

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

4.输入框从中间输入:

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

5.输入框变色:

<input type="text" size="20" style="background-color:#FFFFFF"
        onfocus="style.backgroundColor='#FFFF00'"
        onblur="style.backgroundColor='#FFFFFF'">

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()" />
<input type="text" value="afreon" onclick="alert(this.value);" readonly />
<input value="不可修改"  readonly= "true" type="text"/>//:字体颜色为黑体

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

<input value="不可修改" disabled="disabled"  type="text"/>//:字体颜色为灰体

11.输入框禁止输入法:

<input onpaste="return false" style="ime-mode:disabled">

想了解更多关于HTML技术的相关技术,可以到动力节点在线免费观看HTML教程视频及下载相关学习资料哦!

0人推荐
共同学习,写下你的评论
0条评论
杨晶珍
程序员杨晶珍

98篇文章贡献357785字

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

JavaWeb的3大组件

代码小兵49806-11 15:28

全面解析Cookie技术

代码小兵49806-11 15:51

浅谈JavaWeb架构演变

代码小兵49806-11 16:22

探讨Web开发中的Session存储与管理

代码小兵51603-29 17:28

JavaScript基础知识

 暴风城-小飞04-06 20:49

发评论

举报

0/150

取消