js 高亮显示文本框中部分内容

最新推荐文章于 2022-12-19 11:28:16 发布

huhuan19890427

最新推荐文章于 2022-12-19 11:28:16 发布

阅读量2k

点赞数

分类专栏： js jsp

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jsp

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<form id="form">
<fieldset>
<legend>测试</legend>
<textarea name="text" rows="10" cols="30">www.51cto.com 技术成就梦想,sdfjkhsdkjfhewkjhrdsfgdfg

</textarea>
<br />
<input name="getText" type="button" value="获取选中文本" />
<input name="getSel" type="button" value="获取光波位置" />
<br /><input name="setText" type="button" value="设置选中文本" />
<input name="setSel" type="button" value="设置光标位置" />
</fieldset>
</form>

<script type="text/javascript">

Selection = function(input){
this.isTA = (this.input = input).nodeName.toLowerCase() == "textarea";
};
with({o: Selection.prototype}){
o.setCaret = function(start, end){
var o = this.input;
if(Selection.isStandard)
o.setSelectionRange(start, end);
else if(Selection.isSupported){
var t = this.input.createTextRange();
end -= start + o.value.slice(start + 1, end).split("\n").length - 1;
start -= o.value.slice(0, start).split("\n").length - 1;
t.move("character", start), t.moveEnd("character", end), t.select();
}
};
o.getCaret = function(){
var o = this.input, d = document;
if(Selection.isStandard)
return {start: o.selectionStart, end: o.selectionEnd};
else if(Selection.isSupported){
var s = (this.input.focus(), d.selection.createRange()), r, start, end, value;
if(s.parentElement() != o)
return {start: 0, end: 0};
if(this.isTA ? (r = s.duplicate()).moveToElementText(o) : r = o.createTextRange(), !this.isTA)
return r.setEndPoint("EndToStart", s), {start: r.text.length, end: r.text.length + s.text.length};
for(var $ = "[###]"; (value = o.value).indexOf($) + 1; $ += $);
r.setEndPoint("StartToEnd", s), r.text = $ + r.text, end = o.value.indexOf($);
s.text = $, start = o.value.indexOf($);
if(d.execCommand && d.queryCommandSupported("Undo"))
for(r = 3; --r; d.execCommand("Undo"));
return o.value = value, this.setCaret(start, end), {start: start, end: end};
}
return {start: 0, end: 0};
};
o.getText = function(){
var o = this.getCaret();
return this.input.value.slice(o.start, o.end);
};
o.setText = function(text){
var o = this.getCaret(), i = this.input, s = i.value;
i.value = s.slice(0, o.start) + text + s.slice(o.end);
this.setCaret(o.start += text.length, o.start);
};
new function(){
var d = document, o = d.createElement("input"), s = Selection;
s.isStandard = "selectionStart" in o;
s.isSupported = s.isStandard || (o = d.selection) && !!o.createRange();
};
}

var f = document.forms.form;
var selection = new Selection(f.text);

f.getText.onclick = function(){
alert(selection.getText());
f.text.focus();
};
f.setText.onclick = function(){
var s = prompt("New text:", selection.getText());
s !== null && selection.setText(s);
f.text.focus();
};
f.getSel.onclick = function(){
var s = selection.getCaret();
alert("Start: " + s.start + "\nEnd: " + s.end);
f.text.focus();
};
f.setSel.onclick = function(){
var s = selection.getCaret();
selection.setCaret(+prompt("开始:", s.start) || 0, +prompt("结束:", s.end) || 0);
f.text.focus();
};
</script>
</body>
</html>