為什么按鍵事件不調度
[英]why keypress event does not dispatch
問題描述
美好的一天。 我想從功能中模擬“ tab”鍵按下。 我只希望在某個范圍之間輸入，然后將光標返回到其他范圍。 並且，如果用戶輸入了更多的位置，則該光標應自動移至下一個范圍。 我搜索了一些例子和想法。 並在不同來源中發現了非常相似的示例。 嘗試過...而且在我的情況下不起作用。
[*]-表示輸入范圍
拜托，有人可以幫我嗎？
我的代碼：
var starts = [22, 47]; var ends = [24, 50]; var tabIndex = 1; var inputIndex = 0; var textarea = $("#inputText"); function setSelectionRange(input, start, end) { if (input.setSelectionRange) { input.focus(); input.setSelectionRange(start, end); } else if (input.createTextRange) { var range = input.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', start); range.select(); } } function setCaretToPos(input, pos) { setSelectionRange(input, pos, pos); } $(document).ready(function() { textarea.keypress(function(e) { if (e.keyCode == 13) { $('form').submit(); e.preventDefault(); } else if (e.keyCode == 9) { e.preventDefault(); if (tabIndex >= starts.length) { tabIndex = 0; } setCaretToPos(document.getElementById("inputText"), starts[tabIndex]); tabIndex++; } }); }); textarea.on("input", function() { var pos = $(this).val().slice(0, this.selectionStart).length; if (inputIndex <= starts.length) { var before = textarea.val().slice(0, starts[inputIndex]); if (this.selectionStart > starts[inputIndex] && this.selectionStart <= ends[inputIndex]) { $(this).val($(this).val().slice(0, this.selectionStart) + $(this).val().slice(this.selectionStart + 1)); setCaretToPos(this, pos); } var after = textarea.val().slice(ends[inputIndex]); if ($(this).val().indexOf(before) !== 0) { $(this).val(before + $(this).val().slice(before.length, ends[inputIndex]) + after); } else if (this.selectionStart >= ends[inputIndex]) { $(this).val(before + $(this).val().slice(before.length, ends[inputIndex]) + after); inputIndex++; var e = $.Event("keypress", { keyCode: 9 }); e.keyCode = 9; $("textarea").trigger(e); } } else { inputIndex = 0; } }); setCaretToPos(document.getElementById("inputText"), starts[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> </head> <body> <form action="/myAction" method="post" modelAttribute="displayVal"> <p><textarea id="inputText" name="inputText" rows="25" cols="25" style="overflow: auto" required>some long text. Input **. Text again. Input 2: ***.</textarea></p> </form> </body> </html>
我在這里看到了例子
1 個解決方案
解決方案1
0 已采納 2018-04-09 09:22:15
只是把
var textarea = $("#inputText");
內部的陳述
$(document).ready...
事件，因為執行此代碼時，尚未以html呈現DOM。 請參閱以下代碼：
$(document).ready(function() {
$("#inputText").keypress(function(e) {
正則表達式在帶有keypress事件的javascript中不起作用
[英]Regular expression does not work in javascript with keypress event
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.