JavaScript文本框脚本编写的注意事项


Posted in Javascript onJanuary 25, 2016

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

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

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

  • size特性,可以指定文本框内能够显示的字符数。
  • value属性可以设置文本框的初始值。
  • maxlength特性则是用于指定文本框内可以接受的最大字符数。

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

  • cols是文本框字符行数;
  • rows是文本框字符列数;

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

一、选择文本

上述两种文本框都支持

  • select()方法,这个方法主要用于选择文本框中的所有文本。不接受任何参数。
  • 与这个方法对应的select事件,在选择了文本框中的文本时事件触发。

1、select()方法

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

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

2、select事件

何时触发该事件:

  • 一般情况下只有用户选择了文本(而且要释放鼠标),才会触发select事件;
  • IE8及更早版本中,只要用户选择了一个字母(不必释放鼠标),就会触发select事件;
  • 在调用select()方法时也会触发;

如:

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

3、取得选择的文本

利用两个属性:

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

三、过滤输入

1、屏蔽字符

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

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:

<form action="">
  <input type="text" name="tel11" id="txtTel1" maxLength="3">
  <input type="text" name="tel12" id="txtTel2" maxLength="3">
  <input type="text" name="tel13" id="txtTel3" maxLength="4">
  <input type="submit" name="btn" id="btn" value="submit">
</form>

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

1、必填字段required属性

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

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

2、其他输入类型

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

var input = document.createElement("input");
input.type = "email";
var isEmailSupported = (input.type == "email");

3、数值范围

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

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

DOM:

<form action="">
  <input type="range" name="tel14" id="txtTel4" required min="10" max="20" step="1">
  <input type="button" value="up" id="up">
  <input type="text" id="output">
  <input type="submit" name="btn" id="btn" value="submit">
</form>

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

3、输入模式

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

<input type="text" id="number" pattern="\d{3}">

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

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

var isPatternSupported="pattern" in document.createElement("input");

4、检测有效性

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

<form action="">
  <input type="text" pattern="w" id="name" required>
  <input type="number" max="10" id="num" required>
  <input type="button" id="check" value="check">
  <input type="submit" id="submit" value="submit" disabled>
</form>

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。

5、禁用验证

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

在提交按钮上添加formnovalidate属性,会不验证提交表单。用js获取submit按钮之后,设置它的formnovalidata属性为true,会禁用表单验证并提交。
以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Javascript排序算法之计数排序的实例
Apr 05 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
详解js私有作用域中创建特权方法
Jan 25 #Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 #Javascript
理解js对象继承的N种模式
Jan 25 #Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 #Javascript
JavaScript数据类型学习笔记
Jan 25 #Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 #Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 #Javascript
You might like
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
python 接口_从协议到抽象基类详解
2017/08/24 Python
详解python的ORM中Pony用法
2018/02/09 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
wxPython实现绘图小例子
2019/11/19 Python
Python笔记之facade模式
2019/11/20 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
酒店执行总经理岗位职责
2013/12/15 职场文书
公司业务员岗位职责
2014/03/18 职场文书
感恩节活动策划方案
2014/05/16 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
交通事故调解协议书
2015/05/20 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers