javascript 多文本框的值 javascript文本框代码

转载

Aceryt 2023-07-23 11:30:40

文章标签 javascript 多文本框的值 javascript js 文本框剪贴板 文章分类 JavaScript 前端开发

一、文本框脚本

表现文本框的两种方式：
（1）使用 <input> 元素的单行文本框
type：“text”
size：指定文本框中能够显示的字符数
value：设置文本框的初始值
maxlength：指定文本框可以接受的最大字符数
<input type="text" size="25" maxlength="50" value="initial value">

（2）使用 <textarea> 的多行文本框
rows：指定文本框的字符行数
cols：指定文本框的字符列数
<textarea rows="25" cols="5">initial value</textarea>

区别：
与 <input> 元素不同， <textarea> 的初始值必须要放在 <textarea> 和 </textarea> 之间；
不能在 HTML 中给 <textarea> 指定最大字符数。
相同点：
都会将用户输入的内容保存在 value 属性中，可以通过这个属性读取和设置文本框的值。

1. 选择文本

（1）select() 方法：用于选择文本框中的所有文本。
在调用 select() 方法时，大多数浏览器(Opera 除外)都会将焦点设置到文本框中。这个方法不接受参数，可以在任何时候被调用。

（2）select 事件：在选择了文本框中的文本时，就会触发 select 事件。
触发时间差异：因浏览器而异。
在 IE9+、Opera、Firefox、Chrome 和 Safari 中，只有用户选择了文本(而且要释放鼠标)，才会触发 select 事件。
在 IE8 及更早版本中，只要用户选择了一个字母(不必释放鼠标)，就会触发 select 事件。
调用 select() 方法时也会触发 select 事件。

（3）取得选择的文本
HTML5 添加两个属性：selectionStart 和 selectionEnd。这两个属性中保存的是基于 0 的数值，表示所选择文本的范围(即文本选区开头和结尾的偏移量)。
获取选中文本：textbox.value.substring(textbox.selectionStart, textbox.selectionEnd); 浏览器支持：IE9+、Firefox、Safari、Chrome 和 Opera。
IE8 及之前版本方案：document.selection 对象，其中保存着用户在整个文档范围内选择的文本信息。（无法确定用户选择的是页面中哪个部位的文本）
在与 select 事件一起使用的时候，可以假定是用户选择了文本框中的文本，因而触发了该事件。取得选择的文本，首先必须创建一个范围，然后再将文本从其中提取出来。

function getSelectedText(textbox){
  if (typeof textbox.selectionStart == "number"){
    return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
  } else if (document.selection){
    return document.selection.createRange().text;
  }
}

（4）选择部分文本
setSelectionRange()：选择部分文本
两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。
要看到选择的文本，必须在调用 setSelectionRange() 之前或之后立即将焦点设置到文本框。
浏览器支持：IE9、Firefox、Safari、Chrome 和 Opera。

IE8 及更早版本：
要选择文本框中的部分文本，步骤如下：
1-必须首先使用 IE 在所有文本框上提供的 createTextRange() 方法创建一个范围，并将其放在恰当的位置上。
2-然后再使用 moveStart() 和 moveEnd() 这两个范围方法将范围移动到位。
在调用这两个方法以前，必须使用 collapse() 将范围折叠到文本框的开始位置。此时，moveStart() 将范围的起点和终点移动到了相同的位置，只要再给 moveEnd() 传入要选择的字符总数即可。
3-最后就是使用范围的 select() 方法选择文本。

跨浏览器解决方案：

function selectText(textbox, startIndex, stopIndex){
  if (textbox.setSelectionRange){
    textbox.setSelectionRange(startIndex, stopIndex);
  } else if (textbox.createTextRange){
    var range = textbox.createTextRange();
    range.collapse(true);
    range.moveStart("character", startIndex);
    range.moveEnd("character", stopIndex - startIndex);
    range.select();
  }
  textbox.focus();
}

2. 过滤输入

屏蔽字符

响应向文本框中插入字符操作的是 keypress 事件。
屏蔽所有按键操作，阻止 keypress 事件的默认行为（极端）。
屏蔽特定的字符，需要检测 keypress 事件对应的字符编码，然后再决定如何响应。

操作剪贴板

在需要确保粘贴到文本框中的文本中包含某些字符，或者符合某种格式要求时，能够访问剪贴板是非常有用的。

6 个剪贴板事件：
beforecopy：在发生复制操作前触发。
copy：在发生复制操作时触发。
beforecut：在发生剪切操作前触发。
cut：在发生剪切操作时触发。
beforepaste：在发生粘贴操作前触发。
paste：在发生粘贴操作时触发。
由于没有针对剪贴板操作的标准，这些事件及相关对象会因浏览器而异。

访问剪贴板中的数据，可以使用 clipboardData 对象。
在 IE 中，这个对象是 window 对象的属性；在 Firefox 4+、Safari 和 Chrome 中，这个对象是相应 event 对象的属性。
在 Firefox、Safari 和 Chorme 中，只有在处理剪贴板事件期间 clipboardData 对象才有效，这是为了防止对剪贴板的未授权访问；在 IE 中，可以随时访问 clipboardData 对象。

clipboardData 对象有三个方法：getData()、setData() 和 clearData()。

getData()：从剪贴板中取得数据。
一个参数：要取得的数据的格式。
在 IE 中，有两种数据格式：“text” 和"URL"。在 Firefox、Safari 和 Chrome 中，是一种 MIME 类型，可以用"text"代表 “text/plain”。

getClipboardText: function(event){
  var clipboardData = (event.clipboardData || window.clipboardData); 
  return clipboardData.getData("text");
}

setData()：设置剪贴板数据。
两个参数：数据类型和要放在剪贴板中的文本。
第一个参数，IE 照样支持"text"和"URL"，而 Safari 和 Chrome 仍然只支持 MIME 类型。但是，与 getData()方法不同的是，Safari 和 Chrome 的 setData() 方法不能识别"text"类型。
返回值：在成功将文本放到剪贴板中后，返回 true；否则返回 false。

setClipboardText: function(event, value){
  if (event.clipboardData){
    return event.clipboardData.setData("text/plain", value);
  } else if (window.clipboardData){
    return window.clipboardData.setData("text", value);
  }
}

clearData()：清空剪贴板数据。

在 paste 事件中，可以确定剪贴板中的值是否有效，如果无效，取消默认行为，即可取消粘贴操作。
由于并非所有浏览器都支持访问剪贴板，所以更简单的做法是屏蔽一或多个剪贴板操作。

3. 自动切换焦点

最常见的一种方式就是在用户填写完当前字段时，自动将焦点切换到下一个字段。

(function(){
  function tabForward(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event); 3
    if (target.value.length == target.maxLength){
      var form = target.form;
      for (var i=0, len=form.elements.length; i < len; i++) {
        if (form.elements[i] == target) {
          if (form.elements[i+1]){
            form.elements[i+1].focus();
          }
          return; 
        }
      }
    }
  }
  var textbox1 = document.getElementById("txtTel1");
  EventUtil.addHandler(textbox1, "keyup", tabForward);
})();

4. HTML5 约束验证API

浏览器支持：Firefox 4+、Safari 5+、Chrome 和 Opera 10+。

必填字段

required 属性：<input type="text" name="username" required> 适用于 <input>、<textarea> 和 <select> 字段。
对于空着的必填字段，不同浏览器有不同的处理方式。

其他输入类型

HTML5 为<input>元素的 type 属性增加了几个值：能反映数据类型的信息，还能提供一些默认的验证功能。
"email"类型：要求输入的文本必须符合电子邮件地址的模式
"url"类型：要求输入的文本必须符合 URL 的模式
设置特定的输入类型并不能阻止用户输入无效的值，只是应用某些默认的验证。

数值范围

type：“number”、“range”、“datetime”、“datetime-local”、“date”、“month”、“week”、“time”。
对所有这些数值类型的输入元素，可以指定 min 属性(最小的可能值)、max 属性(最大的可能值) 和 step 属性(从 min 到 max 的两个刻度间的差值)。
在不同的浏览器中，可能会也可能不会看到能够自动递增和递减的数值调节按钮(向上和向下按钮)。

输入模式

HTML5为文本字段新增了 pattern 属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。
<input type="text" pattern="\d+" name="count"> 指定 pattern 不能阻止用户输入无效的文本。

检测有效性

checkValidity()：检测表单中的某个字段是否有效
所有表单字段都有这个方法，如果字段的值有效，这个方法返回 true，否则返回 false。

要检测整个表单是否有效，可以在表单自身调用 checkValidity() 方法。
如果所有表单字段都有效，这个方法返回 true；即使只有一个字段无效，这个方法也会返回 false。

validity 属性：判断具体什么字段有效或无效。
这个对象中包含一系列属性，每个属性会返回一个布尔值。
customError：如果设置了 setCustomValidity()，返回 true。
patternMismatch：如果值与指定的 pattern 属性不匹配，返回 true。
rangeOverflow：如果值比 max 值大，返回 true。
rangeUnderflow：如果值比 min 值小，返回 true。
stepMisMatch：如果 min 和 max 之间的步长值不合理，返回 true。
tooLong：如果值的长度超过了 maxlength 属性指定的长度，返回 true。
typeMismatch：如果值不是"mail"或"url"要求的格式，返回 true。
valueMissing：如果标注为 required 的字段中没有值，返回 true。
valid：如果这里的其他属性都是 false，返回 true。checkValidity() 也要求相同的值。

禁用验证

novalidate 属性：可以告诉表单不进行验证
<form method="post" action="signup.php" novalidate> </form>

如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上添加 formnovalidate 属性。
<input type="submit" formnovalidate name="btnNoValidate" value="Non-validating Submit">

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。