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


Posted in Javascript onOctober 30, 2020

在 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:在发生粘贴操作时触发。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 #Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 #Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 #Javascript
解决Vue-cli无法编译es6的问题
Oct 30 #Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 #Javascript
Vue自定义表单内容检查rules实例
Oct 30 #Javascript
探索node之事件循环的实现
Oct 30 #Javascript
You might like
PHP安全配置
2006/10/09 PHP
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php cli换行示例
2014/04/22 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
python字典排序实例详解
2015/05/20 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python 2.7.14安装图文教程
2018/04/08 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
技校毕业生的自我评价
2013/12/27 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
年终奖发放方案
2014/06/02 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
Python Parser的用法
2021/05/12 Python
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏