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 相关文章推荐
js模仿hover的具体实现代码
Dec 30 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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连接mysql是否成功的代码分享
2014/01/24 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python如何实现文本转语音
2016/08/08 Python
python正则表达式之对号入座篇
2018/07/24 Python
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
骨干教师培训感言
2014/01/16 职场文书
总经理助理工作职责
2014/02/06 职场文书
银行求职信
2014/05/31 职场文书
体育部部长竞选稿
2015/11/21 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
Python数据分析之绘图和可视化详解
2021/06/02 Python
python编程实现清理微信重复缓存文件
2021/11/01 Python