Question

我已经在这件事情上看了几天。

在某些背景下，我将解释目标：我有一个textarea，我希望当我输入一些由我定义的特殊字符（比如@）时，它会将其检测为字典的一部分并显示自动完成浮动潜水以供选择以及它是否不在字典中它补充说。

当前状态/问题是我尝试使用输入事件捕获textarea中的更改并且它有效，它会在我想要的时候运行处理程序代码，但我无法访问数据。

我想我可以捕获粘贴事件和关键事件，从一个获取剪贴板，从另一个获取关键代码，但我想知道是否有一种方法可以通过输入事件来完成。

这里有相关代码：

＆＃13;

function checkLastCharacter(event){
  console.log(event);
}

$( document ).ready(function() {
    console.log( "ready!" );
    //$( "#update" ).click(updateClick);
    var text=document.getElementById("text");
    text.addEventListener("input", checkLastCharacter);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="text" rows="4" cols="50">Sample text</textarea>

＆＃13;

执行结果：无论我按什么键，或者粘贴或不显示任何内容：

＆＃34;事件：未定义＆＃34;

提前致谢！

Answer 1

编辑：

这将处理来自剪贴板的粘贴事件。您将需要通过char解析char以处理您的特定令牌以显示您需要显示的内容。

$('target').on('paste', function () {
  var element = this;
  setTimeout(function () {
    var text = $(element).val();
    // do something with text
  }, 100);
});

你会更好地使用jquerys .keypress()甚至在捕获每个击键的页面上都有一个例子（以及一堆其他信息）：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>keypress demo</title>
  <style>
  fieldset {
    margin-bottom: 1em;
  }
  input {
    display: block;
    margin-bottom: .25em;
  }
  #print-output {
    width: 100%;
  }
  .print-output-line {
    white-space: pre;
    padding: 5px;
    font-family: monaco, monospace;
    font-size: .7em;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<form>
  <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text">
  </fieldset>
</form>
<button id="other">
  Trigger the handler
</button>
<script src="/resources/events.js"></script>

<script>
var xTriggered = 0;
$( "#target" ).keypress(function( event ) {
  if ( event.which == 13 ) {
     event.preventDefault();
  }
  xTriggered++;
  var msg = "Handler for .keypress() called " + xTriggered + " time(s).";
  $.print( msg, "html" );
  $.print( event );
});

$( "#other" ).click(function() {
  $( "#target" ).keypress();
});
</script>

</body>
</html>

此脚本的输出为：

Handler for .keypress() called 21 time(s).
{
originalEvent: [object KeyboardEvent],
type: keypress,
isDefaultPrevented: function returnFalse() {
    return false;
},
timeStamp: 41095.395000000004,
jQuery1102038791229348009115: true,
keyCode: 114,
key: r,
charCode: 114,
char: undefined,
which: 114,
view: [object Window],
target: <input id="target">,
shiftKey: false,
relatedTarget: undefined,
metaKey: false,
eventPhase: 2,
currentTarget: <input id="target">,
ctrlKey: false,
cancelable: true,
bubbles: true,
altKey: false,
delegateTarget: <input id="target">,
handleObj: [object Object],
data: null,
isPropagationStopped: function returnFalse() {
    return false;
},
isImmediatePropagationStopped: function returnFalse() {
    return false;
},
preventDefault: function () {
        var e = this.originalEvent;

        this.isDefaultPrevented = returnTrue;
        if ( !e ) {
            return;
        }

        // If preventDefault exists, run it on the original event
        if ( e.preventDefault ) {
            e.preventDefault();

        // Support: IE
        // Otherwise set the returnValue property of the original event to false
        } else {
            e.returnValue = false;
        }
    },
stopPropagation: function () {
        var e = this.originalEvent;

        this.isPropagationStopped = returnTrue;
        if ( !e ) {
            return;
        }
        // If stopPropagation exists, run it on the original event
        if ( e.stopPropagation ) {
            e.stopPropagation();
        }

        // Support: IE
        // Set the cancelBubble property of the original event to true
        e.cancelBubble = true;
    },
stopImmediatePropagation: function () {
        this.isImmediatePropagationStopped = returnTrue;
        this.stopPropagation();
    }
}

Answer 2

event.data语法错误。如果您需要textarea使用

的值

 console.log(event.target.value);

或

function checkLastCharacter(event,this){ console.log(this.value); }

＆＃13;
＆＃13;
function checkLastCharacter(event){ console.log(event.target.value); } $( document ).ready(function() { console.log( "ready!" ); //$( "#update" ).click(updateClick); var text=document.getElementById("text"); text.addEventListener("input", checkLastCharacter); });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="text" rows="4" cols="50"> ASfadfasbncaksjb </textarea>
＆＃13;
＆＃13;
＆＃13;

从textarea上的输入处理程序访问event.data

2 个答案: