javascript – 插入符号在textarea中的行之间移动时触发事件

前端之家收集整理的这篇文章主要介绍了javascript – 插入符号在textarea中的行之间移动时触发事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果用户更改插入符号的那一行,是否有一个文字区域触发事件的方法,比如通过点击或使用向上/向下的箭头?或者这只是不可能在 Javascript?我找到了找到/设置插入符号的当前位置的方法,但这不是我需要的…

解决方法

听起来你需要注册几个事件为您的文本区域.离开我的头顶,点击事件和具有多个键码值的按键事件.您需要使用纯 JavaScript,还是使用一些JavaScript库来利用?

你需要帮助注册事件吗?或者您需要帮助在其中一个事件中找到插入位置? (请参阅andy的链接)或是我的问题“是”的答案?

编辑

好的,从你的评论你可以与jquery,而fieldselection插件阻止你重新发明的轮子.

>识别任何键盘键,鼠标点击,?复制粘贴?可以在文本字段中移动插入符的事件. Navigate and select portions of text,wikipedia
>在活动期间,使用fieldselection插件获取新的插入位置.
>使用当前的插入位置&&字体大小&&文本框物理尺寸&&换行计数,以确定您是否已切换到新行.
>如果你做了切换行,触发一个自定义的jQuery事件做你想要的工作.

// jQuery 1.7

$(document).ready(function(){
  var currentLine = -1;
  $("#textAreaID").on("keypress",function(evt){
   if(evt.which === 40 || ...){
//down arrow key,enter key,page down key,all will move the caret to a newline
     $(this).trigger("newline");
   }else{
//a ton of text in a fixed width textarea will move the cursor to a newline
     $(this).trigger("checkForNewline");
   }
  }).on("click checkForNewline",function(evt){
    var jqElem = $(this);
//fieldSelection plugin call
    var range = jqElem.getSelection();
    if(range["row"] && range["row"] !== currentLine){
      currentLine = range["row"];
      jqElem.trigger("newline");
   }else{
      var handTypedNewlines = jqElem.val().split(/\r\n|\r|\n/);
      var userTypedRowcounts = Math.floor(wholeString.length / jqElem.cols) + (handTypedNewlines instanceof 'object')?handTypedNewlines.length:0;
      if(userTypedRowcounts != currentLine){
         currentLine = userTypedRowcounts;
         jqElem.trigger("newline");
      }
   }
  }).on("newline",function(evt){
   // do your work,caret is on a newline.
  });
});

引用堆栈溢出.

reference to get .split() regex

猜你在找的JavaScript相关文章