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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
jQuery简单实现日历的方法
May 04 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
Express框架之connect-flash详解
May 31 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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
第三节--定义一个类
2006/11/16 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
vue实现文件上传功能
2018/08/13 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Python中使用logging模块打印log日志详解
2015/04/05 Python
九步学会Python装饰器
2015/05/09 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
如何表示python中的相对路径
2020/07/08 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
应届大学生自荐信格式
2013/09/21 职场文书
开工仪式策划方案
2014/05/23 职场文书
技术经济专业求职信
2014/09/03 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
战友聚会致辞
2015/07/28 职场文书
运动会100米广播稿
2015/08/19 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书