Javascript文本框脚本实现方法解析
作者:Terre 发布时间:2024-04-25 10:36:22
在 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:在发生粘贴操作时触发。
来源:https://www.cnblogs.com/vali/p/13833126.html
猜你喜欢
- 本文实例讲述了PHP 对象继承原理与简单用法。分享给大家供大家参考,具体如下:对象继承继承已为大家所熟知的一个程序设计特性,PHP 的对象模
- 在过去的几十年里,机器学习对世界产生了巨大的影响,而且它的普及程度似乎在不断增长。最近,越来越多的人已经熟悉了机器学习的子领域,如神经网络,
- 目录问题复现隐式转换总结参考问题在工作中发现,有一个接口只执行一条SQL查询语句,并且SQL明明使用了主键列,但是速度很慢。在MySQL中E
- # -*- coding: utf-8 -*-# 测试各种排序算法# link:www.jb51.net# date:2013/2/2#选择
- 本文实例讲述了python实现从ftp服务器下载文件的方法。分享给大家供大家参考。具体实现方法如下:import ftplibftp = f
- 接上篇Mysql数据库性能优化二对表进行水平划分 &nbs
- 这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记。条件渲染v-if在 < templ
- 语法 SET IDENTITY_INSERT [ database.[ owner.] ] { table } { ON | OFF } 参
- 1.命名空间先看看官方文档的一段话:命名空间(Namespace)是从名称到对象的映射,大部分的命名空间都是通过 Python 字典来实现的
- 题:取表table中100条-200条之间数据 方法1:临时表 select top 200 * into #aa from table o
- IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固
- 本文实例讲述了python获取mp3文件信息的方法。分享给大家供大家参考。具体如下:将代码生成.py文件放在目录下运行,可以获取该目录的所有
- 从今天开始起,基督山将和大家一起进入ASP.net 诸多程序的学习中,老实说,.net到底是法宝还是垃圾,我们拭目以待。有任何问题,联络基督
- 注意转义字符\的使用\\,\",\$ 注意使用8进制或16进制字符表示 \xf6 echo "H\xf6me"
- python的ImageTk.PhotoImage大坑如果大家遇到这样的报错:Exception in Tkinter callbackTr
- Python提供了一些内建函数用于基本对象类型:cmp(),repr(),str(),type()和等同于repr()的('
- 本文实例讲述了Python实现统计给定列表中指定数字出现次数的方法。分享给大家供大家参考,具体如下:直接看实现:#!usr/bin/env
- Django中的Models 是什么?通常一个Model对应数据库的一张数据表, Django中Models以类似的形式表现, 它包含了一些
- 这篇文章主要介绍了jekins配置python脚本定时任务过程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价
- 作为开发者,我们可以通过以下3中方式来配置logging:1)使用Python代码显式的创建loggers, handlers和format