heml textarea文本框数据回显文本框js

转载

智慧编织者 2024-04-15 22:53:17

文章标签 前端 javascript 文本框字段表单 文章分类 机器学习人工智能

HTML中两种方式表现文本框：
1、input
2、textarea
区别在于：
1、<input>要表现文本框，必须将<input>元素的type特性设置为"text"。而通过设置size特性，可以指定文本框中能够显示的字符数。通过value特性，可以设置文本框的初始值，而maxlength特性则用于指定文本框可以接受的最大字符数。
2、<textarea>元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用rows
和 cols 特性。其中，rows特性指定的是文本框的字符行数，而cols特性指定的是文本框的字符列数（类似于<inpu>元素的size特性）。与<input>元素不同，<textarea>的初始值必须要放在<textarea>和</textarea>之间。
3、<textarea>与<input>的区别在于，不能在HTML中给<textarea>指定最大字符数。
4、无论这两种文本框在标记中有什么区别，但它们都会将用户输入的内容保存在value属性中。可以通过这个属性读取和设置文本框的值。
5、不建议使用标准的 DOM 方法使用value属性读取或设置文本框的值，不要使用setAttribute()设置<input>元素的value特性，也不要去修改<textarea>元素的第一个子节点。原因很简单：对value属性所作的修改，不一定会反映在DOM中。
一、选择文本
两种文本框都支持select()方法，用于选择文本框中的所有文本。在调用select()方法时，大多数浏览器（Opera除外）都会将焦点设置到文本框中。这个方法不接受参数，可以在任何时候被调用。
在文本框获得焦点时选择其所有文本

EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});

1、选择事件

与 select()方法对应的，是一个select事件。在选择了文本框中的文本时，就会触发select事件。不过，到底什么时候触发select事件，还会因浏览器而异。在IE9+、Opera、Firefox、Chrome和Safari中，只有用户选择了文本（而且要释放鼠标），才会触发select事件。而在IE8 及更早版本中，只要用户选择了一个字母（不必释放鼠标），就会触发select事件。另外，在调用select()方法时也会触发select事件。

2、取得选择的文本

HTML5规范采取的办法是添加两个属性：selectionStart和selectionEnd可以知道用户选择了什么文本。这两个属性中保存的是基于0的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）。

取得用户在文本框中选择的文本

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

IE9+、Firefox、Safari、Chrome和Opera都支持这两个属性。IE8及之前版本不支持这两个属性，

而是提供了另一种方案。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;
}
}

注意，调用document.selection时，不需要考虑textbox参数。

3、选择部分文本

HTML5 也为选择文本框中的部分文本提供了解决方案，即最早由Firefox引入的setSelectionRange()方法。现在除select()方法之外，所有文本框都有一个setSelectionRange()方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引（类似于substring()方法的两个参数）。

要看到选择的文本，必须在调用 setSelectionRange()之前或之后立即将焦点设置到文本框。IE9、Firefox、Safari、Chrome和Opera支持这种方案。

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();
}

二、过滤输入

1、屏蔽字符

在文本框中输入特定的数据，或者输入特定格式的数据。例如，必须包含某些字符，或者必须匹配某种模式。在极端的情况下，可以通过下列代码屏蔽所有按键操作。

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
});

如果只想屏蔽特定的字符，则需要检测 keypress事件对应的字符编码，然后再决定如何响应。

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){
EventUtil.preventDefault(event);
}
});

除此之外，还有一个问题需要处理：复制、粘贴及其他操作还要用到Ctrl 键。在除 IE 之外的所有浏览器中，前面的代码也会屏蔽 Ctrl+C、 Ctrl+V，以及其他使用Ctrl 的组合键。因此，最后还要添加一个检测条件，以确保用户没有按下Ctrl 键。

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 &&
!event.ctrlKey){
EventUtil.preventDefault(event);
}
});

2、操作剪贴板

下列就是 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" 。setData()方法与getData()方法不同的是，Safari 和 Chrome的 setData()方法不能识别"text"类型。这两个浏览器在成功将文本放到剪贴板中后，都会返回true；否则，返回 false。

var EventUtil = {
//省略的代码
getClipboardText: function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},

//省略的代码

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

//省略的代码

};

3、自动切换焦点

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

<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">
(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
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");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

4、HTML5 约束验证API

支持此功能的Firefox 4+、Safari 5+、 Chrome 和 Opera 10+

a 必填字段。在表单字段中指定了 required属性。这个属性适用于<input>、<textarea>和<select>字段（Opera 11及之前版本还不支持<select>的required 属性）。在 JavaScript 中，通过对应的 required 属性，可以检查某个表单字段是否为必填字段。

在JavaScript 中，通过对应的required 属性，可以检查某个表单字段是否为必填字段。

var isUsernameRequired = document.forms[0].elements["username"].required;

使用下面这行代码可以测试浏览器是否支持 required属性。

var isRequiredSupported = "required" in document.createElement("input");

b 其他输入类型。 "email"和"url"是两个得到支持最多的类型，各浏览器也都为它们增加了定制的验证机制。

c 数值范围。要求填写某种基于数字的值："number"、 "range"、 "datetime"、"datetime-local"、"date"、 "month"、"week"，还有"time"。浏览器对这几个类型的支持情况并不好，因此如果真想选用的话，要特别小心。对所有这些数值类型的输入元素，可以指定min 属性（最小的可能值）、 max 属性（最大的可能值）和step 属性（从 min 到 max的两个刻度间的差值）。

d 输入模式。HTML5为文本字段新增了 pattern 属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。

e 检测有效性。使用checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有个方法，如果字段的值有效，这个方法返回true，否则返回 false。字段的值是否有效的判断依据是本节前面介绍过的那些约束。换句话说，必填字段中如果没有值就是无效的，而字段中的值与pattern 属性不匹配也是无效的。

与 checkValidity()方法简单地告诉你字段是否有效相比，validity 属性则会告诉你为什么字段有效或无效。这个对象中包含一系列属性，每个属性会返回一个布尔值。

customError ：如果设置了setCustomValidity()，则为true，否则返回 false。

patternMismatch：如果值与指定的pattern 属性不匹配，返回 true。

rangeOverflow：如果值比max 值大，返回 true。

rangeUnderflow：如果值比min 值小，返回 true。

stepMisMatch：如果 min 和 max之间的步长值不合理，返回 true。

tooLong：如果值的长度超过了maxlength 属性指定的长度，返回true。有的浏览器（如 Firefox 4）会自动约束字符数量，因此这个值可能永远都返回false。

typeMismatch：如果值不是"mail"或"url"要求的格式，返回true。

valid：如果这里的其他属性都是false，返回 true。checkValidity()也要求相同的值。

valueMissing：如果标注为required 的字段中没有值，返回true。

因此，要想得到更具体的信息，就应该使用 validity 属性来检测表单的有效性。

f 禁用验证。通过设置novalidate 属性，可以告诉表单不进行验证。如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上添加 formnovalidate属性。