当前位置:小鱼儿玄机二站 > 操作系统 > JavaScript让Textarea协助tab按钮的不二秘诀

JavaScript让Textarea协助tab按钮的不二秘诀

文章作者:操作系统 上传时间:2019-09-08
  <!doctype html> 
  <html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>每天一个JavaScript实例-处理textarea中的字符成每一行</title> 
    <script> 

        function clicka(){ 
          console.log("aaa"); 
          var aa = document.getElementById("text"); 
          var lines = aa.value.split("n"); 
          var bbb = document.getElementById("result"); 
          var string = ""; 
          for(i=0;i<lines.length;i++){ 
            string+= lines[i]+"<br />";////</br> 和<br /> 应该用 <br /> 
          } 
          bbb.innerHTML=string 
          } 

    </script> 
    </head> 

    <body>     
    <textarea id="text" placeholder="请输入多行文字"></textarea> 
    <div id = "result"></div>         
    <a href="javascript:void(0);" onClick="clicka()">处理换行</a>                       
    </body> 
    </html>

本文实例陈述了JavaScript让Textarea帮忙tab开关的法子。分享给我们供我们参谋。具体达成情势如下:

您或者感兴趣的小说:

  • JavaScript得到并改动input标签name属性的不二等秘书技
  • javascript落到实处依次输入input自动定焦
  • javascript使用正则调整input输入框允许输入的值方法大全
  • input 日期选取效率的javascript代码
  • JavaScript落到实处点击自动选拔TextArea文本的不二等秘书诀
  • JavaScript让Textarea匡助tab按钮的方法
  • JavaScript判断textarea值是不是为空并交付相应提醒
  • Javascript 文本框textarea中度随内容自适应抓实收缩
  • JavaScript落到实处为input与textarea自定义hover,focus效果的方式
HTMLTextAreaElement.prototype.getCaretPosition = function () {
//return the caret position of the textarea
 return this.selectionStart;
};
HTMLTextAreaElement.prototype.setCaretPosition = function (position) {
//change the caret position of the textarea
 this.selectionStart = position;
 this.selectionEnd = position;
 this.focus();
};
HTMLTextAreaElement.prototype.hasSelection = function () {
//if the textarea has selection then return true
 if (this.selectionStart == this.selectionEnd) {
  return false;
 } else {
  return true;
 }
};
HTMLTextAreaElement.prototype.getSelectedText = function () {
//return the selection text
 return this.value.substring(this.selectionStart, this.selectionEnd);
};
HTMLTextAreaElement.prototype.setSelection = function (start, end) {
//change the selection area of the textarea
 this.selectionStart = start;
 this.selectionEnd = end;
 this.focus();
};
var textarea = document.getElementsByTagName('textarea')[0]; 
textarea.onkeydown = function(event) {
 //support tab on textarea
 if (event.keyCode == 9) { //tab was pressed
  var newCaretPosition;
  newCaretPosition = textarea.getCaretPosition() + " ".length;
  textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
  textarea.setCaretPosition(newCaretPosition);
  return false;
 }
 if(event.keyCode == 8){
 //backspace
  if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") {
  //it's a tab space
   var newCaretPosition;
   newCaretPosition = textarea.getCaretPosition() - 3;
   textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
   textarea.setCaretPosition(newCaretPosition);
  }
 }
 if(event.keyCode == 37){ //left arrow
  var newCaretPosition;
  if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") {
  //it's a tab space
   newCaretPosition = textarea.getCaretPosition() - 3;
   textarea.setCaretPosition(newCaretPosition);
  } 
 }
 if(event.keyCode == 39){
 //right arrow
  var newCaretPosition;
  if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") {
  //it's a tab space
   newCaretPosition = textarea.getCaretPosition() + 3;
   textarea.setCaretPosition(newCaretPosition);
  }
 } 
}

瞩望本文所述对我们的javascript程序设计具有扶助。

您可能感兴趣的小说:

  • JavaScript得到并改换input标签name属性的不二等秘书技
  • javascript完结依次输入input自动定焦
  • javascript使用正则调节input输入框允许输入的值方法大全
  • input 日期选用功用的javascript代码
  • JavaScript达成点击自动选拔TextArea文本的不二诀窍
  • 二个JavaScript管理textarea中的字符成每一行实例
  • JavaScript决断textarea值是不是为空并交由相应提醒
  • Javascript 文本框textarea高度随内容自适应加强裁减
  • JavaScript完结为input与textarea自定义hover,focus效果的形式

本文由小鱼儿玄机二站发布于操作系统,转载请注明出处:JavaScript让Textarea协助tab按钮的不二秘诀

关键词: