JavaScript关于表单脚本的一些实用技巧

避免多次提交表单

1
2
3
4
5
6
7
8
var form = document.getElementById("myform");
form.addEventListener("submit", function(event) {
var event = event || window.event;
var target = event.target;
var btn = target.elements["submit-btn"];
btn.disabled = true;
}, false);

以上代码为表单的submit事件添加了一个事件处理程序. 事件触发后, 代码取得了提交按钮, 并将其disabled属性设置为true. 注意, 不能通过onclick事件处理程序来实现这个功能. 原因是因不同浏览器之间存在”时差”: 有的浏览器会在触发表单的submit事件之前触发click事件.


根据条件修改文本框背景颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var textbox = document.forms[0].elements[0];
textbox.addEventListener("focus", function(event) {
var event = event || window.event,
target = event.target;
if (target.style.backgroundColor != "red") {
target.style.backgroundColor = "yellow";
}
}, false);
textbox.addEventListener("blur", function(event) {
var event = event || window.event,
target = event.target;
if (/[^\d]/.test(target.value)) {
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
}, false);
textbox.addEventListener("change", function(event) {
var event = event || window.event,
target = event.target;
console.log(123)
if (/[^\d]/.test(target.value)) {
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
}, false)

取得选择的文本

1
2
3
4
5
6
7
function getSelectedText(textbox) {
if (typeof textbox.selectionStart == "number") {
return textbox.value.substring(textbox.selectionStart, textbox.sectionEnd);
} else if (document.selection) {//兼容IE
return document.selection.createRange().text;
}
}

这里写图片描述


选择部分文本

1
2
3
4
5
6
7
8
9
10
11
12
function selecText(textbox, startIndex, stopIndex) {
if (textbox.setSelectionRange) {
textbox.setSelectionRange(startIndex, stopIndex);
} else if (textbox.createTextRange) {//兼容IE8及更早版本
var range = textbox.createTextRange();
range.collapse(true);
range.moveStart("character", startIndex);
range.moveEnd("character", stopIndex - startIndex);
range.select();
textbox.focus();
}
}

测试1:

1
2
3
4
5
6
7
8
textbox.addEventListener("focus", function(event) {
var event = event || window.event,
target = event.target;
if (target.style.backgroundColor != "red") {
target.style.backgroundColor = "yellow";
}
selecText(textbox, 0, 1);
}, false);

效果:
这里写图片描述

测试2:

1
selecText(textbox, 0, 5);

这里写图片描述


获得剪切板信息

1
2
3
4
5
6
7
8
9
10
11
12
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);
}
}

注意: Firefox, Safari, Chrome只允许在onpaste事件处理程序中访问getData( )方法. (测试2017/9/1: 在copy事件下获取返回空字符串)

用途:
在paste事件中, 可以确定剪切板的值是否有效, 如果无效, 就可以像下面示例中那样, 取消默认的行为.

1
2
3
4
5
6
7
8
textbox.addEventListener("paste", function(event) {
var event = event || window.event;
text = getClipboardText(event);
if (!/^\d*$/.test(text)) {
event.preventDefault();
}
}, false)

自动切换焦点

效果:
这里写图片描述

1
2
3
4
5
6
//HTML
<form method="post" id="myform">
<input type="text" name="tel1" id="textTel1" maxlength="3">
<input type="text" name="tel2" id="textTel2" maxlength="3">
<input type="text" name="tel3" id="textTel3" maxlength="4">
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//Js
(function() {
function tabForward(event) {
var event = event || window.event;
target = event.target;
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();
}
}
}
}
}
var textbox1 = document.getElementById("textTel1");
var textbox2 = document.getElementById("textTel2");
var textbox3 = document.getElementById("textTel3");
textbox1.addEventListener("keyup", tabForward);
textbox2.addEventListener("keyup", tabForward);
textbox3.addEventListener("keyup", tabForward);
})();
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!