首页 > 编程笔记 > JavaScript笔记
阅读:5
jQuery操作<input>输入框(附带实例)
文本框是表单中比较常见的一种元素,在jQuery中获取文本框的值的代码如下:
设置文本框的值,可以使用 attr() 方法,代码如下:
设置文本框不可编辑的代码如下:
设置文本框可编辑的代码如下:
【实例】获取文本框的值以及切换文本框的编辑状态。
1) 创建一个名为 index.html 的文件,在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。
2) 在页面的 <body> 标记中创建一个文本框,用来输入用户名。然后创建两个按钮,其中一个是“提交”按钮,另一个是普通按钮。关键代码如下:
3) 在引入 jQuery 库的代码下方编写 jQuery 代码,实现当单击“提交”按钮时,如果文本框内容不为空,则弹出文本框的值,并且将文本框的编辑状态切换为不可编辑状态;如果文本框内容为空,则给出提示信息。当单击“修改”按钮时,如果文本框的编辑状态为不可编辑状态,则将其切换为可编辑状态。具体代码如下:

图 1 弹出文本框的值
单击“确定”按钮可以看到,文本框的编辑状态切换为不可编辑状态,如下图所示:

图 2 文本框的编辑状态切换为不可编辑状态
提交完毕后,单击“修改”按钮可以看到,文本框的编辑状态切换为可编辑状态,如下图所示。

图 3 文本框的编辑状态切换为可编辑状态
var textCon = $("#id").val();或者:
var textCon = $("#id").attr("value");
设置文本框的值,可以使用 attr() 方法,代码如下:
$("#id").attr("value", "要设定的值");
设置文本框不可编辑的代码如下:
$("#id").attr("disabled", "disabled");
设置文本框可编辑的代码如下:
$("#id").removeAttr("disabled");
【实例】获取文本框的值以及切换文本框的编辑状态。
1) 创建一个名为 index.html 的文件,在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。
<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>
2) 在页面的 <body> 标记中创建一个文本框,用来输入用户名。然后创建两个按钮,其中一个是“提交”按钮,另一个是普通按钮。关键代码如下:
用户名:<input type="text" name="testInput" id="testInput" /> <br/><br/> <input type="submit" name="vbtn" id="vbtn" value="提交" /> <input type="button" name="btn" id="dbtn" value="修改" />
3) 在引入 jQuery 库的代码下方编写 jQuery 代码,实现当单击“提交”按钮时,如果文本框内容不为空,则弹出文本框的值,并且将文本框的编辑状态切换为不可编辑状态;如果文本框内容为空,则给出提示信息。当单击“修改”按钮时,如果文本框的编辑状态为不可编辑状态,则将其切换为可编辑状态。具体代码如下:
$(document).ready(function(){ $("#vbtn").click(function(){ if($("#testInput").val() != ""){ alert($("#testInput").val()); // 弹出文本框的值 $("#testInput").attr("disabled","disabled"); // 将文本框的编辑状态切换为不可编辑状态 }else{ alert("请输入文本内容! "); $("#testInput").focus(); // 将焦点设置在文本框处 return false; } }); $("#dbtn").click(function(){ if($("#testInput").attr("disabled") == "disabled"){ $("#testInput").removeAttr("disabled"); // 移除文本框的disabled属性 } }); });运行本实例,输入用户名,单击“提交”按钮,将显示下图所示的运行结果。

图 1 弹出文本框的值
单击“确定”按钮可以看到,文本框的编辑状态切换为不可编辑状态,如下图所示:

图 2 文本框的编辑状态切换为不可编辑状态
提交完毕后,单击“修改”按钮可以看到,文本框的编辑状态切换为可编辑状态,如下图所示。

图 3 文本框的编辑状态切换为可编辑状态