当插入符号在textarea中的行之间移动时发射事件

时间:2011-11-17 16:20:22

标签: javascript events textarea

如果用户更改插入符号所在的行(例如,通过单击或使用向上/向下箭头),是否有办法让textarea触发事件?或者这在Javascript中是不可能的?我找到了找到/设置插入符号当前位置的方法,但这不是我需要的...

1 个答案:

答案 0 :(得分:3)

听起来您需要为文本区注册几个事件。脱离我的头脑,点击事件,以及具有多个键码值的按键事件。你需要使用纯javascript,还是要使用一些javascript库?

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


修改

好的,从你的评论中你可以使用jquery,而fieldselection插件可以防止你重新发明轮子。

  1. 识别任何键盘按键,鼠标点击,?复制粘贴?可以在文本字段中移动插入符的事件。 Navigate and select portions of text, wikipedia
  2. 在活动期间,使用fieldselection插件获取新的插入位置。
  3. 使用当前的插入位置&&字体大小&&文本框物理尺寸&&换行计数以确定您是否已切换到新行。
  4. 如果您切换了行,则触发自定义jQuery事件以完成您想要的工作。
  5. // 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