cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk melaksanakan JavaScript untuk merekodkan kedudukan kursor dalam kemahiran editor_javascript

Bagaimana untuk melaksanakan JavaScript untuk merekodkan kedudukan kursor dalam kemahiran editor_javascript

WBOY
WBOYasal
2016-05-16 15:04:361059semak imbas

Contoh dalam artikel ini menerangkan kaedah pelaksanaan JavaScript merekodkan kedudukan kursor dalam editor. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut: 

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

Untuk lebih banyak kandungan berkaitan JavaScript, sila lihat topik khas di tapak ini: "Ringkasan JavaScript menukar kesan dan teknik khas", "Ringkasan teknik algoritma carian JavaScript" , "Animasi JavaScript Ringkasan kesan dan teknik khas", "Ringkasan ralat JavaScript dan teknik penyahpepijatan", "Ringkasan struktur data JavaScript dan teknik algoritma" , "Ringkasan algoritma dan teknik traversal JavaScript " dan "Ringkasan penggunaan operasi matematik JavaScript"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Analisis mendalam tentang cara menggunakan fungsi pengelompokan kedai dalam kemahiran Extjs_javascriptArtikel seterusnya：Analisis mendalam tentang cara menggunakan fungsi pengelompokan kedai dalam kemahiran Extjs_javascript

Artikel berkaitan

Lihat lagi