JavaScript記錄光標在編輯器中位置的實現方法
來源:易賢網 閱讀:785 次 日期:2016-07-06 16:32:14
溫馨提示:易賢網小編為您整理了“JavaScript記錄光標在編輯器中位置的實現方法”,方便廣大網友查閱!

這篇文章主要介紹了JavaScript記錄光標在編輯器中位置的實現方法,涉及JavaScript鼠標事件結合頁面元素的操作技巧,需要的朋友可以參考下

本文實例講述了JavaScript記錄光標在編輯器中位置的實現方法。分享給大家供大家參考,具體如下:

<!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>

希望本文所述對大家JavaScript程序設計有所幫助。

更多信息請查看網絡編程

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網