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 相关文章推荐
JavaScript While 循环基础教程
Apr 05 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
php mysql数据库操作分页类
2008/06/04 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP单链表的实现代码
2016/07/05 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
客服实习的个人自我鉴定
2013/10/20 职场文书
治超工作实施方案
2014/05/04 职场文书
会议营销主持词
2015/07/03 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
小学教师教学反思
2016/02/24 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS