Form表单之input文本框操作

最新推荐文章于 2024-10-15 17:39:38 发布

原创最新推荐文章于 2024-10-15 17:39:38 发布 · 7.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#input text #readonly #disabled

javaScript 专栏收录该内容

16 篇文章

订阅专栏

本文主要介绍如何使用jQuery操作Form表单中的input文本框，包括设置readonly和disabled属性，提供基础的文本框操作方法，旨在为开发者提供参考和便利。

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

input文本框操作：（该系列文章js的操作内容为jQuery，jquery需要各位自己引入，后期会补充进js的操作方式）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <title>Form表单文本框操作示例1</title>
  <style>
    body{font-size:14px;}
    label{display:inline-block;width:7em;margin-left:0.3em;margin-right:0.3em;}
	input{margin-top:0.3em;margin-bottom:0.3em;}
	.tipmsg{font-size:14px;color:#f00;}
  </style>
</head>

<body>
<form>
  <h3>input文本框</h3><hr>
  <div>
    <label>input输入框1：</label>
    <input type="text" name="text1" value="input文本框1"/>
	<span class="tipmsg">
	input框默认type为text文本框；但如果样式库定义了type或者定义了input:not([type])则会存在样式上的区别；
	</span>
  </div>
  
  <div>
    <label>input输入框2：</label>
    <input type="text" name="text2" value="input文本框2只读" readonly="readonly"/>
	<span class="tipmsg">
	input="text"含readonly="readonly"属性，内容只读，不能手动编辑;
	readonly="true"和readonly="false"都无法手动编辑，应该是只要有readonly属性就是只读，这两种方式都是不规范的；
	</span>
  </div>
  
  <div>
    <label>input输入框3：</label>
    <input type="text" name="text3" value="input文本框3禁用" disabled="disabled"/>
	<span class="tipmsg">
	input="text"含disabled="disabled"属性，内容禁用；
	disabled="true"和disabled="false"都是禁用状态，应该是只要有disabled属性就是只读，这两种方式都是不规范的；
	disabled和readonly属性同时存在则表现为disabled的属性行为；
	</span>
  </div>
  
  <div>
    <label>input输入框4：</label>
    <input type="text" id="text4"/>
	<span class="tipmsg">
	$("#text4").val("js为文本框赋值");//用js改变文本框的值（id选择器）
	</span>
  </div>
  
  <div>
    <label>input输入框5：</label>
    <input type="text" name="input5"/>
	<span class="tipmsg">
	$("input[name='input5']").val("js为文本框赋值");//用js改变文本框的值（name选择器）；暂不讨论name数组和class
	</span>
  </div>
  
  <div>
    <label>input输入框6：</label>
    <input type="text" id="text6" value="文本框focus切换只读属性"/>
	<span class="tipmsg">
	$("#text6").attr("readonly","readonly");//js控制文本框只读
	$("#text6").removeAttr("readonly");//js移除readonly属性；本例中还讲到了js的css()；<br>
	•对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。<br>
    •对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。<br>
	之前我一直用的attr，今天突然用到了控制单选按钮是否禁用时发现用attr无效，才注意到用prop；
	</span>
  </div>
</form>

<script src="./jquery-1.x.min.js"></script>
<script>
$(function(){
  $("#text4").val("js为文本框赋值");
  $("input[name='input5']").val("js为文本框赋值");
  
  $("#text6").focus(function(){
    /*
    var read = $(this).attr("readonly");
	if(read==undefined){
	  $(this).attr("readonly","readonly");
	  $(this).css("background-color","#eee");
	}else{
	  $(this).removeAttr("readonly");
	  $(this).css("background-color","#fff");
	}
	*/
	var read = $(this).prop("readonly");
	if(read==false){//attr这里是undefined，而prop的为false;
	  $(this).prop("readonly","readonly");
	  $(this).css("background-color","#eee");
	}else{
	  $(this).removeProp("readonly");
	  $(this).css("background-color","#fff");
	}
  });
  

});
</script>
</body>
</html>

对于下拉、单选、复选，发现自己每次都要去网上重新找符合自己需求的方式取值或者选中，故准备写Form系列的文章备查。这篇比较基础，但希望给觉得有用的人以借鉴。