html5:input禁用

最新推荐文章于 2024-11-04 09:53:22 发布

milijiangjun

最新推荐文章于 2024-11-04 09:53:22 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # html5 net

本文链接：https://blog.youkuaiyun.com/milijiangjun/article/details/99415209

html5 同时被 2 个专栏收录

232 篇文章

订阅专栏

net

224 篇文章

订阅专栏

本文介绍了在HTML中禁用输入框的三种常见方式：使用disabled属性使文字变灰且不可编辑；使用readonly属性阻止编辑但保持文字颜色不变；使用onfocus=this.blur()使输入框失去焦点。并通过实例展示了这三种方法的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

禁用的界面的3中方式：

1.disabled 属性文字会变成灰色，不可编辑。

2.readonly 属性文字不会变色，也是不可编辑的

3.οnfοcus=this.blur() 当鼠标放不上就离开焦点

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	 

	  var saveday = prompt("请输入当前月份信息","");
	  if (saveday.length >0) {
	  	alert("大于0");
	  }
	    //if(/^[0-9]+$/.test(saveday)){}// 只能输入数字
	    //只能输入中文英文数字
	 if(/^[\a-\z\A-\Z0-9\u4E00-\u9FA5]+$/.test(saveday)){}
	 	else{
	 		alert("不是中文、英文、数字");

	 	}
	</script>

</head>
<body>
	<input type="text" name="input1" value="中国" disabled="true">

	<input type="text" name="input1" value="中国" onfocus=this.blur()> 

	<input type="text" name="input1" value="中国" readonly> 
	<input type="text" name="input1" value="中国" readonly="true"> 
	
	 
</body>
</html>

如果通过js或者jquery进行设置的话代码如下：

$("#id").attr("readonly","readonly");  //通过id 未测试
    $("input[name='AnTaiPersonnelApprovalProcess.HRAccount']").val(data.OK);//通过name 赋值  
								 $("input[name='AnTaiPersonnelApprovalProcess.HRAccount']").attr('readonly',true);//通过name 进行设置只读属性。

//input 的内容
 <input name="AnTaiPersonnelApprovalProcess.HRAccount" id="AnTaiPersonnelApprovalProcess.HRAccount" type="text" value="文本框" style="border-collapse: collapse; margin-bottom: 0px;" type1="flow_text" valuetype="0" defaultvalue="" align="left"/>