JavaScript記錄光標(biāo)在編輯器中位置的實(shí)現(xiàn)方法

更新時(shí)間：2016年04月22日 08:52:09 作者：zhangw428

這篇文章主要介紹了JavaScript記錄光標(biāo)在編輯器中位置的實(shí)現(xiàn)方法,涉及JavaScript鼠標(biāo)事件結(jié)合頁(yè)面元素的操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript記錄光標(biāo)在編輯器中位置的實(shí)現(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>無(wú)標(biāo)題文檔</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>

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS中的BOM應(yīng)用
我們?cè)?jīng)講過(guò)JS由三部分組成，其中一個(gè)部分就是BOM，用于對(duì)瀏覽器進(jìn)行操作。這篇文章我們主要來(lái)介紹BOM應(yīng)用，感興趣的朋友一起看看吧
2018-02-02
深入了解JavaScript詞法作用域
這篇文章主要介紹了JavaScript詞法作用域的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
js實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-04-04
原生js實(shí)現(xiàn)表格循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)表格循環(huán)滾動(dòng)，每次滾動(dòng)一行停頓，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
解決js ajax同步請(qǐng)求造成瀏覽器假死的問(wèn)題
下面小編就為大家分享一篇解決js ajax同步請(qǐng)求造成瀏覽器假死的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
解析JavaScript實(shí)現(xiàn)DDoS攻擊原理與保護(hù)措施
本文主要對(duì)JavaScript實(shí)現(xiàn)DDoS攻擊原理與保護(hù)措施進(jìn)行介紹，具有一定的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
使用Visual?Studio?2022開(kāi)發(fā)前端的詳細(xì)教程
這篇文章主要介紹了使用Visual?Studio?2022開(kāi)發(fā)前端,在瀏覽器中可以使用CDN源引用需要的客戶端庫(kù)，可如果在企業(yè)內(nèi)網(wǎng)使用，無(wú)法訪問(wèn)CDN源時(shí)，需要將客戶端庫(kù)下載到本地使用，需要的朋友可以參考下
2022-05-05
JavaScript數(shù)組去重的兩種方法推薦
下面小編就為大家?guī)?lái)一篇JavaScript數(shù)組去重的兩種方法推薦。小編覺(jué)得聽(tīng)錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看
2016-04-04
js怎么只刷新當(dāng)前頁(yè)面一次
Javascript刷新頁(yè)面的幾種方法：location.reload()、location.replace(location)、history.go(0)、location=location、location.assign(location)、document.execCommand('Refresh')、window.navigate(location)、document.URL=location.href,js怎么只刷新當(dāng)前頁(yè)面一次呢
2023-09-09
JavaScript 中的12種循環(huán)遍歷方法【總結(jié)】
本文給大家總結(jié)了12種JavaScript 中的1循環(huán)遍歷方法,每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-05-05