为什么创建时输入字段不为空？

Question

到目前为止，我总是在 Whosebug 上找到我在编码时遇到的问题的答案 Javascript/Jquery，但现在我陷入了死胡同。简单 html 和脚本，我在其中创建了一个输入字段。这个输入字段是故意的，只有在我按下 's' 键时才会出现，但无论我尝试什么，'s' 也会出现在输入字段中，这是不应该的。只有在我特意清除inputfield之后，这个域是空的，然后焦点就丢失了...

这是我使用的一个示例（当然它是一个更大程序的一部分），您可以看到我试图让它工作的方法。任何帮助表示赞赏。谢谢

<!DOCTYPE html>
<html>
    <head>
        <title>Textbox-Test</title>
         <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">
        <script type="text/javascript" language="javascript" src="jquery-1.9.1.min.js"></script>

        <script>
        function showSearchBox() {
            output = 'Please enter your search-word here: <input type="text" value="" id="searchBox"/>';
            $('#inputArea').html(output);

            //$('#searchBox').focus();
            //$('#searchBox').html("");
            //$('#searchBox').val("");          
            $('#searchBox').clear();        // clears the box (all the others don't), but only if .focus is after it, plus there there is no focus
            //$('#searchBox').empty();      
            //$('#searchBox').reset();
            $('#searchBox').focus();
        };
        function HandleKeyDown(e) {
            if (e.keyCode == 83) {                      // s  show Search-box.
                showSearchBox();
            }
        };
        $(document).ready(function () { 
            $(document).keydown(HandleKeyDown);
        });

        </script>

    </head>
    <body>
    <h2>Please press the 's' key to open the Search-Textbox.</h2>
        <div id="inputArea"></div>
    </body>
</html>

Answer 1

在我的笔记本电脑 macbook pro 中，键 s 的键码是 115。认为您应该根据自己的情况找出它，然后将按键事件用作：

$(document).ready(function () { 
            var flag = true;
            $(document).keypress(function(e) {
              if(flag == true) {
              alert(e.which)
              if(e.which == '115') { 
                flag = false
                $('#inputArea').html('<input type="text" value="" id="searchBox"/>')
                $('#searchbox').focus(function(){});
              }
                
              }
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
    <h2>Please press the 's' key to open the Search-Textbox.</h2>
        <div id="inputArea"></div>
    </body>

标志仅用于触发一次成功事件

Answer 2

因为您将 keydown 委托给文档，所以在将您的输入附加到 div 之后，也会从该输入字段接收到 keydown。

勾选event.target.id这样如果你不在inpt字段就只能添加搜索输入框

function showSearchBox() {
  output = 'Please enter your search-word here: <input type="text" value="" id="searchBox"/>';
  
  $('#inputArea').append(output);  // use append instead of html
  
  $('#searchBox').focus();
};
function HandleKeyDown(e) {
  
  // if e.target.id is the input field do nothing
  if (e.keyCode == 83 && e.target.id != 'searchBox') {
    
    e.preventDefault();  // do not accept s char because you are creating a new textbox
    
    showSearchBox();
  }
};
$(function () {
  $(document).keydown(HandleKeyDown);
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<h2>Please press the 's' key to open the Search-Textbox.</h2>
<div id="inputArea"></div>

为什么创建时输入字段不为空？

How come Input field is not empty when creating it?

jquery

input

keydown