JavaScript記錄光標在編輯器中位置的實現(xiàn)方法
本文實例講述了JavaScript記錄光標在編輯器中位置的實現(xiàn)方法。分享給大家供大家參考,具體如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<script type="text/javascript">
function $(ele){return document.getElementById(ele)}
//記錄編輯器中的位置
var selection_start;
var selection_end;
function savePos(textBox){
var start=0;
var end=0;
if(typeof(textBox.selectionStart) == "number"){ // not ie
//alert(typeof(textBox.selectionStart) );
start = textBox.selectionStart;
end = textBox.selectionEnd;
}
else if(document.selection){
var range = document.selection.createRange();
if(range.parentElement().id == textBox.id){
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
range_all.moveStart('character', 1);
for (var i = 0; i <= start; i ++){
if (textBox.value.charAt(i) == '/n')
start++;
}
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
range_all.moveStart('character', 1);
for (var i = 0; i <= end; i ++){
if (textBox.value.charAt(i) == '/n')
end ++;
}
}
}
selection_start = start;
selection_end = end;
}
</script>
<form action="" id="test">
<textarea id="t" onfocus="savePos(this);$('log').value=selection_start" onkeydown="savePos(this);$('log').value=selection_start" onmousedown="savePos(this);$('log').value=selection_start" onmouseup="savePos(this);$('log').value=selection_start" >
</textarea>
<input type="text" id="log" />
</form>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- Javascript實現(xiàn)獲取及設(shè)置光標位置的方法
- JS在可編輯的div中的光標位置插入內(nèi)容的方法
- javascript控制在光標位置插入文字適合表情的插入
- js獲取光標位置和設(shè)置文本框光標位置示例代碼
- JS在TextArea光標位置插入文字并實現(xiàn)移動光標到文字末尾
- JavaScript 獲取/設(shè)置光標位置,兼容Input&&TextArea
- textbox 在光標位置插入字符功能的js實現(xiàn)(兼容ie,firefox)
- 用javascript獲取當頁面上鼠標光標位置和觸發(fā)事件的對象的代碼
- 用javascript獲取textarea中的光標位置
相關(guān)文章
layui 實現(xiàn)自動選擇radio單選框(checked)的方法
今天小編就為大家分享一篇layui 實現(xiàn)自動選擇radio單選框(checked)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js報錯:Maximum?call?stack?size?exceeded的解決方法
這篇文章主要給大家介紹了關(guān)于js報錯Maximum?call?stack?size?exceeded的解決方法,文中通過實例代碼將解決的方法介紹的非常詳細,需要的朋友可以參考下2023-02-02
js 數(shù)組當前行添加數(shù)據(jù)方法詳解
這篇文章主要介紹了js 數(shù)組當前行添加數(shù)據(jù)方法詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
JavaScript基礎(chǔ)知識及常用方法總結(jié)
JAVASCRIPT是AJAX技術(shù)中不可或缺的一部分,所以想學好AJAX以及現(xiàn)在流行的AJAX框架,學好JAVASCRIPT是最重要的,通過本篇文章給大家介紹javascript基礎(chǔ)知識及常用方法總結(jié),對js基礎(chǔ)知識及常用方法相關(guān)知識感興趣的朋友一起學習吧2016-01-01
JS面向?qū)ο缶幊袒A(chǔ)篇(一) 對象和構(gòu)造函數(shù)實例詳解
這篇文章主要介紹了JS面向?qū)ο缶幊虒ο蠛蜆?gòu)造函數(shù),結(jié)合實例形式詳細分析了JS面向?qū)ο缶幊虒ο蠛蜆?gòu)造函數(shù)具體概念、原理、使用方法及操作注意事項,需要的朋友可以參考下2020-03-03

