资讯专栏INFORMATION COLUMN

JavaScript 表单脚本——“文本框脚本”的注意要点

kk_miles / 591人阅读

摘要:属性可以设置文本框的初始值。特性则是用于指定文本框内可以接受的最大字符数。与这个方法对应的事件,在选择了文本框中的文本时事件触发。如阻止用户选择要调用之前或之后立即将焦点设置到文本框。

在HTML中,有两种方式来表现文本框:

一种是使用input元素的单行文本,另一种是使用textarea的多行文本框。

使用input方式,必须添加type,设置为“text”。

size特性,可以指定文本框内能够显示的字符数。

value属性可以设置文本框的初始值。

maxlength特性则是用于指定文本框内可以接受的最大字符数。

textarea的初始值则必须放在开始和结束标签之内。

cols是文本框字符行数;

rows是文本框字符列数;

另外,不能在HTML中给textarea指定最大字符数;

选择文本

上述两种文本框都支持

select()方法,这个方法主要用于选择文本框中的所有文本。不接受任何参数。

与这个方法对应的select事件,在选择了文本框中的文本时事件触发。

select()方法

下面的代码是只要文本框获得焦点,就会选择全部的文本:

var textBox = document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.value = "input your firstName";
//设置事件
textBox.addEventListener("focus", function () {
    event.target.select();
});
select事件

何时触发该事件:

一般情况下只有用户选择了文本(而且要释放鼠标),才会触发select事件;

IE8及更早版本中,只要用户选择了一个字母(不必释放鼠标),就会触发select事件;

在调用select()方法时也会触发;

如:

var textBox = document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.value = "input your firstName";
//设置事件
textBox.addEventListener("select", function () {
    console.log("selected");
});
取得选择的文本

利用两个属性:

selectionStart

selectionEnd

这两个属性保存的是基于0的数值,表示所选择文本的范围(偏移量)。因此要取得用户选择的文本框中的文本,可以使用如下代码:

var textBox = document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.value = "input your firstName";
//设置事件
textBox.addEventListener("select", function () {
    var selected = textBox.value.substring(textBox.selectionStart,textBox.selectionEnd);
    console.log(selected); 
});

另外,也可以用该属性来设置当获得焦点的时候默认全选的状态:

textBox.addEventListener("focus", function () {
    textBox.selectionStart = "0";
    textBox.selectionEnd = textBox.value.length;
});

或者:

textBox.addEventListener("focus", function () {
    textBox.blur();
});

但是,使用selectionStart/End属性时,IE8不支持,但支持另一个名为

document.selection对象,该对象保存着用户在整个文档范围内选择的文本信息

获取选择的文本的兼容版本为:

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;
    }
}
选择部分文本

选择部分文本的方法是:

setSelectionRange()方法。接收两个参数:要选择第一个字符的索引和最后一个字符的索引。

如阻止用户选择:

textBox.addEventListener("focus", function () {
    textBox.setSelectionRange(0,0);
});
textBox.addEventListener("select", function () {
    textBox.setSelectionRange(0,0);
});

要调用setSelectionRange()之前或之后立即将焦点设置到文本框。而IE中使用的方式是适用范围来解决文本的问题:

var range = textBox.createTextRange();
range.collapse(true); //范围折叠到开头
range.moveStart("Character",0);
range.moveEnd("Character",textBox.value.length);
range.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);
        range.select();
    };
}
过滤输入 屏蔽字符

下面的代码仅允许输入数字:

var textBox = document.getElementById("myForm").elements["firstName"];
textBox.autofocus = true;
textBox.addEventListener("keypress", function () {
    if (!/d/.test(String.fromCharCode(event.charCode))) { //仅输入数字
        event.preventDefault();
    };
});

但是部分浏览器会对向上、下键、退格键触发keypress事件,所以需要对这些常用的操作键取消禁止,只要不屏蔽那些字符编码小于10的键即可:

textBox.addEventListener("keypress", function () {
    if (!/d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey) { //仅输入数字
        event.preventDefault();
    };
});
操作剪贴板

以下是6个剪贴板事件

beforecopy:在发生复制操作前触发

copy:在发生复制时触发

beforecut:在发生剪贴前操作

cut:在发生加贴时操作

beforepaste:在发生黏贴操作前触发

paste:在发生黏贴操作时触发

如设置禁止拷贝:

//拷贝之前提示禁止拷贝
textBox.addEventListener("beforecopy", function() {
    textBox.value = "do not copy";
});
//拷贝时禁止拷贝
textBox.addEventListener("copy", function() {
    event.preventDefault();
});

要访问剪贴板中的数据,可以使用clipboardData对象,在IE中,这个对象是window对象的属性,在friefox,safari和chrome,这个对象是相应event对象的属性;在IE中可以随时访问该对象;但在其他浏览器中只有在处理剪贴板事件期间才有效。

这个clipboardData对象有三个方法:

getData()

setData()

clearData()

getData()接收一个参数,即要取得数据的格式(IE中有两种数据格式:text和URL;在其他浏览器中这个参数是一种MIME类型;不过可以用text代替text/plain)。

setData()接收两个参数,即数据类型和要放在剪贴板中的文本。(第一个参数中,IE支持text和URL;第二个参数中chrome和safari不支持text类型);这两个浏览器在成功将文本放到剪贴板中后,都会返回true;否则,返回false:

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

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

目前浏览器逐渐收紧对访问剪贴板的操作。

自动切换焦点

理论上就是在前一个文本框中的字符打到最大数量后,自动将焦点切换到下一个文本框:

DOM:

js:

var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");

textbox1.addEventListener("keyup", tabForward);
textbox2.addEventListener("keyup", tabForward);
textbox3.addEventListener("keyup", tabForward);

function tabForward() {
    var target = event.target;
    //当value长度等于最大值的时候
    if (target.value.length == target.maxLength) {
        var form = target.form;
        //遍历所在的form表单中的元素
        for (var i = 0, len = form.elements.length; i < len; i++) {
            //如果该元素是目标元素
            if (form.elements[i] == target) {
                //并且该元素的下一个元素为true 其他条件
                if ((form.elements[i + 1]) && (form.elements[i + 1].nodeType == 1) && (form.elements[i + 1].tagName.toLowerCase() == "input") && (form.elements[i + 1].type == "text")) {
                    //则下个元素获得焦点
                    form.elements[i + 1].focus();
                }
            }
        };
    }
}
HTML5约束验证API 必填字段required属性

在必填字段中添加属性required。它适用于input,textarea,select字段。使用下面的代码可以检测浏览器是否支持required属性:

var isRequiredSupported="required" in document.createElement("input");
其他输入类型

input的type属性增加了“email”和“url”;各浏览器也都为它们增加了定制的验证机制:

var input = document.createElement("input");
input.type = "email";
var isEmailSupported = (input.type == "email");
数值范围

除了“email”和“URL”,HTML5还定义了另外几个输入元素。这几个元素都要求填写基于数字的值:“number”,“range”,“datetime”,“datetime-local”,“date”,“mouth”,“week”,“time”。目前浏览器对这些类型支持并不好,如果真想使用的话要小心。

对这事数值类型的输入元素可以指定min属性,max属性,step属性。同时这些数值类型元素还有两个方法:stepUp(),stepDown()。都接受一个参数,要在当前基础上加上或减去的数值。

DOM:

js:

var input = document.getElementById("txtTel4");
var up = document.getElementById("up");

input.addEventListener("mousemove", function () {
    var output = document.getElementById("output");
    output.value = input.value;
});
up.addEventListener("click", function () {
    //点击value值以2为单位增加
    input.stepUp(2);
    var output = document.getElementById("output");
    output.value = input.value;
});
输入模式

HTML5新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值。



var num = document.getElementById("number");
console.log(num.pattern); //d{3}

可以使用以下代码来检测浏览器是否支持pattern属性:

var isPatternSupported="pattern" in document.createElement("input");
检测有效性

使用checkValidity()方法可以检测表单中的字段是否有效。所有表单的字段都有这个方法,如果检查有效返回true。

var form = document.forms[0]; var name = document.getElementById("name"); var number = document.getElementById("num"); var check = document.getElementById("check"); var submit = document.getElementById("submit"); check.addEventListener("click", function () { console.log(form.checkValidity()); //检测整个表单是否正确 if (form.checkValidity()) { submit.removeAttribute("disabled"); check.disabled = true; }else{ alert("请检查表单"); } });

input的validity属性会给出什么字段有效和无效的具体信息。

var inputName = document.getElementById("inputName");
inputName.onblur = function() {
    if (inputName.checkValidity()) {
        inputName.style.color = "white";
        inputName.style.backgroundColor = "green";

    } else {
        inputName.style.color = "white";
        inputName.style.backgroundColor = "red";
        if (inputName.validity.patternMismatch) {
            inputName.value = "请填写正确的格式";
        }
    }
};
inputName.addEventListener("mouseenter", function () {
    inputName.focus();
    inputName.select();
});

validity主要包括下列属性:

customError:是否设置了setCustomValidity();

patternMismatch:是否与pattern属性匹配;

rangeOverflow:是否比max值大;

rangeUnderflow:是否比min值小;

stepMisMatch:步长是否合理;

tooLong:是否超过了maxlength;

typeMismatch:是否不是mail类型和url类型;

valid:如果这里的其他属性都是false,返回true;

valueMissing:如果为required中没有值,返回true。

禁用验证

通过设置表单的novalidate属性,可以是表单不进行验证。用js获取form之后,设置它的novalidate属性为true,会禁用表单验证。

在提交按钮上添加formnovalidate属性,会不验证提交表单。用js获取submit按钮之后,设置它的formnovalidata属性为true,会禁用表单验证并提交。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78525.html

相关文章

  • 表单脚本

    摘要:文本框脚本有两种方式表现文本框的单行文本框和的多行文本框。对于单行文本框,通过特性可以指定文本框能够显示的字符数,通过特性访问其内容,而则用于指定其可以接受的最大字符数。 title: 表单脚本 date: 2016-12-19 15:17 tags: JavaScript 0x00 表单基础 在 HTML 中,表单由 元素来表示,但是在 JavaScript 中,表单对应...

    stormgens 评论0 收藏0
  • 高程3总结#第14章表单脚本

    表单脚本 表单的基础知识 HTMLFormElement有自己独特的属性和方法 acceptCharset,服务器能够处理的字符集,等价于HTML中的accept-charset特性 action,接受请求的URL,等价于HTML中的action特性 elements,表单中所有控件的集合 enctype,请求的编码类型,等价于HTML中的enctype特性 length,表单中控件的数量 m...

    Tony 评论0 收藏0
  • JS学习笔记(第14章)(表单脚本

    摘要:布尔值,表示当前字段是否被禁用。指向当前字段所属表单的指针只读。文本框脚本在中,有两种方式来表现文本框一种是使用元素的单行文本框,另一种是使用的多行文本框。然后,我们把这个函数指定为每个文本框的事件处理程序。 本章知识架构 showImg(https://segmentfault.com/img/bVbvCTV?w=921&h=713); var EventUtil = { /...

    BlackHole1 评论0 收藏0
  • JavaScript 表单脚本——“表单序列化”注意要点

    摘要:浏览器如何将数据发送给服务器对表单字段的名称和值进行编码,使用和号分隔不发送禁用的表单字段只发送勾选的复选框和单选按钮不发送为和的按钮多选框中每个选中的值单独一个条目在单击提交按钮提交表单的情况下,也会发送提交按钮。否则不发送提交按钮。 浏览器如何将数据发送给服务器: 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送t...

    BlackHole1 评论0 收藏0
  • JavaScript 表单脚本——“表单基础知识”注意要点

    摘要:处理表格和提交等等重置表单重置表单应该使用或当用户单击重置按钮重置表单时,会触发事件,可以在必要的时候取消重置操作另外也可以通过脚本调用方法重置表单,在调用方法重置表单时会触发事件。在中,表单中新增加了属性,自动把焦点移动到相应字段。 HTMLFormElement继承了HTMLElement,它自己独有的属性和方法有: acceptCharset:服务器能够处理的字符集,等价于HT...

    chnmagnus 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<