<meta name="keywords" content="华夏棋牌,JavaScript,文本框,剧本" />
华夏棋牌 > web前端 > js教程 > 注释

JavaScript文本框剧本编写的重视事项_javascript手艺

原创 2016-05-16 15:18:32 0 178
赞助会员专享特权
华夏棋牌 在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;
  }
}

2、选择部门文本

华夏棋牌选择部门文本的措施是:

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

3、过滤输入

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:

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:

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属性,这个属性的值是一个正则表达式,用于婚配文本框中的值。



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

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

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

4、检测有用性

应用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。

5、禁用验证

经由历程设置表单的novalidate属性,可以是表单不阻拦验证。用js取得form以后,设置它的novalidate属性为true,会禁用表单验证。

在提交按钮上添加formnovalidate属性,会不验证提交表单。用js取得submit按钮以后,设置它的formnovalidata属性为true,会禁用表单验证并提交。
以上就是本文的一切内容,欲望对年夜家的学习有所赞助。

php中文网最新课程二维码
  • 相关标签:JavaScript 文本框 剧本
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 原生javascript完因素享到同伙圈功效 支持ios和android_javascript手艺
  • jQuery链式挪用与show知识浅析_jquery
  • JS完成登录页面记着密码和enter键登录措施推荐_javascript手艺
  • BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺
  • JavaScript文本框剧本编写的重视事项_javascript手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173612)

    独孤九贱(4)_PHP视频教程

    华夏棋牌江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(169721)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137153)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130452)

    PHP入门视频教程之一周学会PHP

    华夏棋牌一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(129795)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节