textbox多行文本框_文本框脚本
在 HTML 中,有两种方式来表现文本框:一种是使用元素的单行文本框,另一种是使用 的多行文本框。这两个控件非常相似,而且多数时候的行为也差不多。不过,它们之间仍 然存在一些重要的区别。
相对而言,元素则始终会呈现为一个多行文本框。要指定文本框的大小,可以使用 rows 和 cols 特性。其中,rows 特性指定的是文本框的字符行数,而 cols 特性指定的是文本框的字符列数 (类似于 元素的 size 特性)。与 元素不同, 的初始值必须要放在 和之间。
选择文本
上述两种文本框都支持 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"
IE8 及更早版本支持使用范围选择部分文本。要选择文本框中的部分文本,必须 首先使用 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设计模式中》你没注意过的细节
textbox多行文本框_文本框脚本相关推荐
- java文本框添加单击事件,组合框和文本框的VBA动态数组单击事件
嘿所有我有以下VBA代码,允许我在动态创建的组合框和文本框上的用户窗体上有一个点击事件 . 用户窗体: Option Explicit Dim comboboxBoxColct As New Coll ...
- Java swing 实现下拉框和文本框同步显示
想要MyEclipse中的swing中实现下拉框和文本框实现,对下拉框创建MouseEvent.ItemEvent.ActionEvent private void xingbieMouseClick ...
- 【js】复选框,复选下拉框,文本框勾连
[js]对常见事件的一个总结 ps: 内容涉及(kendo Ui, jQuery) 如下图所示:要求实现功能点 (1)用户名(复选下拉框,可选择多个)和用户名(文本输入框)相勾连 复选下拉框改变,文本 ...
- Word中的图文框和文本框
图文框和文本框的区别 图文框和文本框是将文字.表格.图形精确定位的有力工具.若要图形和文字一起进行图文混排,就要用到图文框和文本框. 文本框实质上是一个图形对象.当用户在文档中手工绘制图形后,在其中添 ...
- html文本框同步,同步组合框HTML文本框与
+---------+------------+ | class | name | +---------+------------+ | 10021 | John | | 10027 | Alex | ...
- HTML文本框(单行文本框,密码文本框)
单行文本框 <!--单行文本框--> <input type="text" value="" size="100" max ...
- Textbox控件禁止用户向文本框中输入文字
在Winform程序中,Textbox控件,如何禁止用户向文本框中输入文字,而只是可以通过程序来写入内容 选择这个控件的属性,在事件列中找到KeyPress,双击,生成相应的事件监听方法,加入代码e. ...
- python单行文本控件_文本框控件
[TOC] # 简介 * 文本框也就是输入框 * QLineEdit是单行文本输入框 * QTextEdit是多行文本输入框 QLineEdit ![](https://box.kancloud.cn ...
- jq选中单选框后文本框不可编辑_打开速度最快最强大的PDF免费工具,编辑+阅读功能一体...
前几天,有个同事遇到个问题,她在她的电脑上用word编辑好的教案,到了印刷室准备打印时,格式却变了.她只好又重新调整了一遍,才打印了出来.浪费了不少时间.大家听她说这个问题后,纷纷附和,原来大家都遇到 ...
- 世界之窗浏览器删除文本框信息_文本框——Excel里的便利贴
工作表里面的单元格应该是足够我们来记录数据和信息了.但是文本框这个功能在工作表中还是存在,可以理解为便利贴功能. 插入文本框 1.点击"插入"选项卡. 2.然后点击"文本 ...
最新文章
- 英特尔公布新技术路线图,将为 AWS、高通代工芯片
- mysql启动失败LSB_MySQL数据库服务启动失败
- SAP 电商云 Spartacus UI 根据 CMS Component uid 获取数据
- django基于存储在前端的token用户认证
- 《深入理解java虚拟机》第1章 走近Java
- Arrays类中的fill(用于填充数组)
- python调用oracle过程 权限不足_Python连接Oracle的一些坑以及出现原因和解决方法...
- 网络诈骗是大数据的“原罪”吗
- Kafka : kafka重启报错 ZkClient allready closed
- 【渝粤教育】21秋期末考试基础会计10258k2
- 解决!Gallery中嵌套ListView,Gallery不能滑动的问题
- 服务器内存型号的后缀字母,收藏!CPU型号20种后缀字母是什么意思?不再被坑!...
- Selenium04-selenium中的Xpath元素定位方法爬虫实践
- kent beck_肯特·沙基(Kent Sharkey)身着“ heezy fo'sheezy babay”!
- python floor是什么意思_python里floor怎么用
- Android - 一种相似图片搜索算法的实现
- 给红米Note 4X编译LineageOS 14.1刷机包过程【详细】
- solidworks显示无法连接到服务器,SOLIDWORKS Electrical解决方法:无法连接协同服务器...
- 中国“钱”途最光明10所大学
- 2022,这些大屏可视化素材,够你用一整年了(附可视化素材包)
热门文章
- 简单的html练习:实现超好看唯美浪漫的文字边框卡片
- was cached in the local repository, resolution will not be reattempted until the update interval of
- android手机内存其他文件夹里,别再胡乱清理手机内存了,1秒清空这些文件夹,手机瞬间腾出50G...
- FUP A17H/A17CH 微量高速冷冻离心机的优劣势
- html 网页表格居中,网页中表格如何居中
- 需求分析之用例模型UML图
- java 裁剪 pdf_Java 合并、拆分PDF文档
- 【PM】互联网项目管理的特点总结
- 加拿大大学计算机世界排名,加拿大计算机专业大学排名
- 爬虫——八爪鱼采集器