Question

到目前为止，我总是在Stackoverflow上找到答案，解答我在编写Javascript / Jquery时遇到的问题，但现在我处于死胡同。简单的html和脚本，我在其中创建一个输入字段。有意的是，这个输入字段仅在我按下＆＃39; s时显示。关键，但无论我怎么做，这些＆＃39;＆＃39;也显示在输入字段中，它不应该这样做。只有在我明确清除了输入字段后，该字段才为空，但随后焦点丢失......

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

<!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中，键的密钥代码是115.认为你应该在你的情况下找到它然后使用keypress事件：

$(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字段中，则只能添加搜索输入框。

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

创建它时，输入字段如何不为空？

2 个答案: