Javascript文本框脚本实现方法解析

在 HTML 中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用 <textarea>的多行文本框。这两个控件非常相似，而且多数时候的行为也差不多。不过，它们之间仍 然存在一些重要的区别。

相对而言，<textarea>元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用 rows 和 cols 特性。其中，rows 特性指定的是文本框的字符行数，而 cols 特性指定的是文本框的字符列数 （类似于 <inpu> 元素的 size 特性）。与 <input> 元素不同， <textarea> 的初始值必须要放在 <textarea>和</textarea>之间。

选择文本

上述两种文本框都支持 select()方法，这个方法用于选择文本框中的所有文本。在调用 select() 方法时，大多数浏览器（Opera 除外）都会将焦点设置到文本框中。这个方法不接受参数，可以在任何 时候被调用。

var textbox = document.forms[0].elements["textbox1"];
textbox.select();

在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值的时 候。因为这样做可以让用户不必一个一个地删除文本。

​选择（select）事件

与 select()方法对应的，是一个 select 事件。在选择了文本框中的文本时，就会触发 select 事件。不过，到底什么时候触发 select 事件，还会因浏览器而异。

取得选择的文本

虽然通过 select 事件我们可以知道用户什么时候选择了文本，但仍然不知道用户选择了什么文本。HTML5 通过一些扩展方案解决了这个问题，以便更顺利地取得选择的文本。该规范采取的办法是添加 两个属性：selectionStart 和 selectionEnd。这两个属性中保存的是基于 0 的数值，表示所选择 文本的范围（即文本选区开头和结尾的偏移量）。因此，要取得用户在文本框中选择的文本，可以使用 如下代码。

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

　　IE8 及更早的版本中有一个 document.selection 对象，其中保存着用户在整个文档范围内选择 的文本信息；兼容IE8的写法

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

选择部分文本

现在除 select()方法之外，所有文本框都有一个 setSelectionRange() 方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引 （类似于 substring()方法的两个参数）。

textbox.value = "Hello world!"
//选择所有文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//选择前 3 个字符
textbox.setSelectionRange(0, 3); //"Hel"
//选择第 4 到第 6 个字符
textbox.setSelectionRange(4, 7); //"o w"

E8 及更早版本支持使用范围选择部分文本。要选择文本框中的部分文本，必须 首先使用 IE 在所有文本框上提供的 createTextRange()方法创建一个范围，并将其放在恰当的位置 上。然后，再使用 moveStart()和 moveEnd()这两个范围方法将范围移动到位。不过，在调用这两个 方法以前，还必须使用 collapse()将范围折叠到文本框的开始位置。此时，moveStart()将范围的起 点和终点移动到了相同的位置，只要再给 moveEnd()传入要选择的字符总数即可。最后一步，就是使 用范围的 select()方法选择文本，如下面的例子所示。

textbox.value = "Hello world!";
var range = textbox.createTextRange();
//选择所有文本 "Hello world!"
range.collapse(true); range.moveStart("character", 0);
range.moveEnd("character", textbox.value.length);
range.select();
​
//选择前 3 个字符 "Hel"
range.collapse(true);
range.moveStart("character", 0);
range.moveEnd("character", 3);
range.select();
​
//选择第 4 到第 6 个字符 "o w"
range.collapse(true);
range.moveStart("character", 4);
range.moveEnd("character", 3);
range.select();

兼容IE8的写法

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

操作剪贴板

IE 是第一个支持与剪贴板相关事件，以及通过 JavaScript 访问剪贴板数据的浏览器。HTML 5 后来也把剪贴板事件纳入了规范。

  • beforecopy：在发生复制操作前触发 。
  • copy：在发生复制操作时触发。
  • beforecut：在发生剪切操作前触发。
  • cut：在发生剪切操作时触发。
  • beforepaste：在发生粘贴操作前触发。
  • paste：在发生粘贴操作时触发。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript设置文本框光标的方法实例小结

    本文实例总结了javascript设置文本框光标的方法.分享给大家供大家参考,具体如下: 对于text //得到光标位置 function getCaret(textbox) { var control = document.activeElement; textbox.focus(); var rang = document.selection.createRange(); rang.setEndPoint("StartToStart",textbox.createTextRange

  • 基于js实现的限制文本框只可以输入数字

    话不多说,直接附上源码,仅供参考 封装了一下,要用的话直接调用下面getEvent函数即可 function getEvent() { if (document.all) { return window.event; //for ie } func = getEvent.caller; while (func != null) { var arg0 = func.arguments[0]; if (arg0) { if ((arg0.constructor == Event || arg0.co

  • JS正则(RegExp)判断文本框中是否包含特殊符号

    前言 有时,我们希望判断文本框中用户输入的字符是否含有特殊符号(*/#$@),就像用户注册时密码框的填写. demo 利用 RegExp 对象,能很优雅的实现以上需求: // even(文本框内容) function (even) { // 规则对象(flag) var flag = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<><>/?~!@#￥--&*()--|{}[]'::""'.,.? ]&

  • JavaScript 限制文本框不可输入英文单双引号的方法

    <input id="workname" style="width: 200px" name="workname" value="" type="text" onkeyup="JavaScript:replaceLikeVal(this)" /> 正则实现replaceAll: function replaceLikeVal(comp){ if (comp.value.ind

  • js控制文本框禁止输入特殊字符详解

    在开发难免遇到一些前端需要验证输入的数据是否合法的问题,收集分享在这里同学们使用,欢迎补充. 1.标签上直接替换方法: JS 控制不能输入特殊字符 <input type="text"class="domain"onkeyup="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')": this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')

  • JS简单获取并修改input文本框内容的方法示例

    JS简单获取并修改input文本框内容的方法示例

    本文实例讲述了JS简单获取并修改input文本框内容的方法.分享给大家供大家参考,具体如下: 一 介绍 获取文本框并修改其内容可以使用getElementById()方法来实现. getElementById()方法可以通过指定的id来获取HTML标记,并将其返回. 语法: sElement=document.getElementById(id) sElement:用来接收该方法返回的一个对象. id:用来设置需要获取HTML标记的id值. 二 应用 获取文本框并修改其内容 在页面加载后的文本框

  • javascript实现文本框标签验证的实例代码

    具体代码如下所述: < !DOCTYPE html > <html lang = "en" > <head > <meta charset = "UTF-8" > <title > Document < /title> </head > <style type = "text/css" > body { background: #ccc; } labe

  • JS与jQuery判断文本框还剩多少字符可以输入的方法

    本文实例讲述了JS与jQuery判断文本框还剩多少字符可以输入的方法.分享给大家供大家参考,具体如下: javascript部分: function $(id) { return document.getElementById(id); } var maxLen=255; function checkMaxInput(){ if($("summary").value.length>maxLen){ $("summary").value=$("summ

  • Javascript文本框脚本实现方法解析

    在 HTML 中,有两种方式来表现文本框:一种是使用<input>元素的单行文本框,另一种是使用 <textarea>的多行文本框.这两个控件非常相似,而且多数时候的行为也差不多.不过,它们之间仍 然存在一些重要的区别. 相对而言,<textarea>元素则始终会呈现为一个多行文本框.要指定文本框的大小,可以使用 rows 和 cols 特性.其中,rows 特性指定的是文本框的字符行数,而 cols 特性指定的是文本框的字符列数 (类似于 <inpu> 元

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

    在HTML中,有两种方式来表现文本框: 一种是使用input元素的单行文本,另一种是使用textarea的多行文本框. 使用input方式,必须添加type,设置为"text". size特性,可以指定文本框内能够显示的字符数. value属性可以设置文本框的初始值. maxlength特性则是用于指定文本框内可以接受的最大字符数. textarea的初始值则必须放在开始和结束标签之内. cols是文本框字符行数: rows是文本框字符列数: 另外,不能在HTML中给textarea指

  • javascript文本框内输入文字倒计数的方法

    本文实例讲述了javascript文本框内输入文字倒计数的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>文本框内输入文字倒计数效果</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin maxLen = 100; //定义用户可以输入的最多字数 function checkMaxInput(obj) { if

  • JavaScript监听文本框回车事件并过滤文本框空格的方法

    本文实例讲述了JavaScript监听文本框回车事件并过滤文本框空格的方法.分享给大家供大家参考.具体如下: <script type="text/javascript" language="javascript"> var username = null; var password = null; //获取文本框 onload = function() { username = document.getElementById("txtUser

  • js实现文本框选中的方法

    本文实例讲述了js实现文本框选中的方法.分享给大家供大家参考.具体如下: 这段javascript代码可解决文本框获得焦点,即使得文本框的内容被选中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

  • javascript搜索框效果实现方法

    本文实例讲述了javascript搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • js实现文本框中输入文字页面中div层同步获取文本框内容的方法

    本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • jQuery实现鼠标单击网页文字后在文本框显示的方法

    本文实例讲述了jQuery实现鼠标单击网页文字后在文本框显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

随机推荐