JavaScript之文本框脚本（表单脚本）

最新推荐文章于 2024-05-05 10:20:33 发布

「已注销」

最新推荐文章于 2024-05-05 10:20:33 发布

阅读量1k

点赞数 1

分类专栏： Javascript学习笔记

本文链接：https://blog.csdn.net/h15882065951/article/details/72584819

版权

文本框脚本

在HTML中，文本框的表现形式有两种：一种是使用 <input>元素且它的type属性值为"text"来表示 单行文本框。二种是使用 <textarea>和</textarea>表示 多行文本框。

要表示单选文本框，可以使用<input>元素且其type属性值为“text”。通过 size设置文本框中能够显示的字符数，通 value设置文本框的初始值，通过 maxlength设置可以接收的最大字符数。例如，让它能够显示25字符数，最大显示字符数为50，初始值为10：

<input type="text" id="input1" size="25" maxlength="50" value="10">

要多行文本框，可以使用<textarea>元素，rows表示文本框的字符行数，cols表示文本框的字符列数。

<textarea>与<input>的不同之处在于：

1、<textarea>的初始值必需放在<textarea>与</textarea>之间。

2、不能在HTML中为<textraea>指定最大字符数。（意味着在JavaScript中能指定）

<textarea rows="10" cols="20">
初始值
</textarea>

这两个元素的初始值都保存在各自的value属性中，也可以通过value这个属性来读取和设置文本的值。

<body>
  
  <form id="myForm" action="" method="get">
    <input type="text" id="input1" value="20">
    <textarea id="textbox" rows="10" cols="20">30</textarea>
  </form>
  
<script>
    var myForm = document.querySelector("#myForm");
    //获取表单中的第一个字段
    var textbox = myForm.elements[0];
    console.log(textbox.value); //20
    //设置该字段的值
    textbox.value = "100";
    console.log(textbox.value); //100
    //获取表单中的第二个字段
    var text = myForm.elements[1];
    console.log(text.value); //30
    //设置该字段的值
    text.value = "200";
    console.log(text.value); //200   
</script>
</body>

注：建议就像以上使用文本框的value属性来读取和设置文本的值。不建议使用DOM操作来读取和设置（也就是不使用setAttribute()设置<input>的value值，也不要去修改<textarea>的值）。因为对value属性所修改的值，不一定会反映在DOM结构中。

选择文本

select()方法用于选择文本框中的所有文本。在调用select()方法时，就会将焦点设置到文本框中。

 <body>
 
 <form id="myForm" action="" method="get">
   <input type="text" id="input1" value="20">
   <textarea id="textbox" rows="10" cols="20">30</textarea>
 </form>
 
 <script>
   var myForm = document.querySelector("#myForm");
   //获取表单中的第一个字段
   var textbox = myForm.elements[0];
   //选择文本，就会获取焦点
   textbox.select();    
</script>

以上例子，当页面加载完成后，表单中的第一个字段就会获得焦点，表示已经被选择。

在文本框获得焦点时选择文本，是一种常见的做法。特别是在文本框有默认值的情况下，这样用户就不必一个一个地删除文本了。

var myForm = document.querySelector("#myForm");
//获取表单中的第一个字段
var textbox = myForm.elements[0];

textbox.addEventListener("focus", function (e) {
    
    var target = e.target;
    target.select();
    console.log("selected")