首页 > 程序开发 > web前端 > JavaScript >

JavaScript选择文本方法

2017-09-05

JavaScript选择文本方法。鼠标手动选择文本后显示:1 选择表单文本selectionStart,selectionEnd

鼠标手动选择文本后显示

1. 选择表单文本selectionStart,selectionEnd

<textarea name="textarea" id="text" cols="30" rows="10"></textarea>
 
text.onselect = function(){
    var s = this.value.substring(this.selectionStart,this.selectionEnd);
    console.log(s);
}

2. IE11以下版本document.selection.createRange

text.onselect = function(){
var s = document.selection.createRange().text;
console.log(s);
}

JavaScript选择文本后显示

1. H5获取表单文本setSelectionRange

var s = text.setSelectionRange(0,text.value.length);//s为text的value,但是页面上并不会有选择文本的的标志。可让文本框获取焦点以在页面显示。
text.setSelectionRange(0,Math.ceil(text.value.length/2));
text.focus();

setSelectionRange和focus都会触发onselect事件。

2. IE createTextRange

  text.value = &#39;0123456789&#39;;

  var range = text.createTextRange();

  range.collapse(true);//参数默认为true,将选择开始的位置设置为当前选中区域的开始,未选中之前为0,参数为false时将选择开始的位置设置为当前选中区域的末尾。

  range.moveStart(&#39;character&#39;,1);//开始位置索引,character表示以字符为单位


  range.select();//相当于focus,文本12高亮;

 range.collapse(false);//将文本12的结束位置当做开始位置
 range.moveStart(&#39;character&#39;,4);//第四个字符为7
 range.moveEnd(&#39;character&#39;,2);//选择文本78
 range.select();

若选择到后面没有字符可以选择则光标停留在最后一个字符后面,未选中任何字符

相关文章
最新文章
热点推荐