文本框脚本 - select 事件
HTML中,用两种方式来表示文本框: input 单行文本、textarea 多行文本
那么在文本中存在哪些事件尼?
1 select 都支持 但是其触发的时机不一样
IE9+ 、Safair 、Opera、Chorme、Firefox | 当用户选择文件时,鼠标松开时触发 |
IE8以及其下 | 当用户选择文本时,就会触发 |
1 window.onload = function() {
2 if (document.addEventListener) {
3 document.forms[0].elements[0].addEventListener("select", function () {
4 console.log("select" + this.value);
5 }, false)
6 } else {
7 document.forms[0].elements[0].attachEvent("onselect", function (event) {
8 console.log("ie select" + event.srcElement.value);
9 });
10 }
11 }
2 取得选择的文本
H5 添加的两个属性,
selectionStart、selectionEnd
IE9+ 、Safair 、Opera、Chorme、Firefox 支持这两个属性
IE8不支持这两个属性,但是提供 document.selection 对象, 其中保存着用户在整个文档范围内选择的文本信息;也就是说,无法确定用户选择的是页面中那个部位的文本。不过,在于select事件一起使用时候,可以假设是用虎选择了文本框中的文本,因此触发该事件。要取得选择的文本,首先必须创建一个范围,然后再将文本从其中取出来,如下。
function getSelectedText(textbox){
if(typeof textbox.selectionStart == "number"){
return textbox.value.substr(textbox.selectionStart,textbox.selectionEnd);
}else if(document.selection){
return document.selection.createRange().text;
}
}
3 选择部分内容
setSelectionRange(start,end) 接收两个参数,并且不包括 end指定的内容
IE9+ 、Safair 、Opera、Chorme、Firefox
document.forms[0].elements[0].setSelectionRange(0,3); //123
document.forms[0].elements[0].setSelectionRange(0,2);//12
document.forms[0].elements[0].setSelectionRange(0,1);//1
IE8以及其低版本中不支持 setSelctionRange方法,但是要想选择部分内容步骤如下:
1 createTextRange 创建一个范围,并将其放在恰当的位置
2 再通过 moveStart() 和 moveEnd()这两个范围方法将范围移动到位。
3 调用moveStart、moveEnd之前必须使用 collapse()将范围折叠到文本框的开始位置。(此时在moveStart()将范围的起始点和终点移到了相同的位置 )
4 接着再给moveEnd()传入要选择的字符总数即可。 最后一步就是使用范围的select()选择文本
movStart()
@param {string} unit character、 word 、 sentence、textedit
@param {Number} [count]
@return {void}
moveEnd()
var textbox = document.forms[0].elements[0]; //who are you miss w
var range = textbox.createTextRange();
range.collapse(true);
range.moveStart("word",0); // character 字符 || word 单词 || sentence 段落
range.moveEnd("word",3); // who are you
range.select();
当为 textedit 插入点(选择开始位置从结尾开始)移动到整个文本范围的结束处
var textbox = document.forms[0].elements[0]; //who are you miss w
var range = textbox.createTextRange();
range.collapse(true);
range.moveStart("textedit"); // character 字符 || word 单词 || sentence 段落
range.moveStart("character",-10); // miss wang
range.select();
综合上面的方式可以给出跨浏览器的方式:
function selectText(textbox,start,end){ if(textbox.setSelectionRange){ textbox.setSelectionRange(start,end) }else{ var range = textbox.createTextRange(); range.collapse(true); range.moveStart("character",start); // character 字符 || word 单词 || sentence 段落 range.moveStart("character",end-start) range.select(); } }
@param {Node}
@param {Number}
@param {Number} [count]
@return {void}
下面通过一个实例来验证一下:
不管哪种情况下,必须是获得焦点之后执行
function selectText(textbox,start,end){ if(textbox.setSelectionRange){ textbox.setSelectionRange(start,end) }else{ var range = textbox.createTextRange(); range.collapse(true); range.moveStart("character",start); // character 字符 || word 单词 || sentence 段落 range.moveStart("character",end - start) range.select(); } } selectText(textbox,0,10); //who are yo