输入按钮上的文本框点击功能答案

【问题标题】：Textbox hit function on Enter button输入按钮上的文本框点击功能
【发布时间】：2013-02-28 13:21:04
【问题描述】：

我有一个 mvc3 应用程序。在一个页面上，我有一个文本框，允许用户搜索客户端，现在我正在努力使用一些功能，因为我是 Windows 窗体和寡妇电话 8 开发人员。我希望这个文本框在我按下回车时执行，我有一个用户可以点击搜索的按钮，但我知道大多数用户只需点击回车！我正在使用 JavaScript 来实现功能！

按钮和文本框的 HTML：

    <td>
<input value="Search..." id="SearchText" style="color:GrayText" onchange="SearchText" onfocus="javascript:this.value=''" onblur="javascript: if(this.value==''){this.value='Search...';}" />
                        <input id="searchbutton" type="button"  value="Search" class="button"/>
                    </td>

这里是 Javascript：

<script type="text/javascript">
            $('#searchbutton').click(function(){
                var client = document.getElementById('SearchText').value;
                var textbox = document.getElementById('SearchText');
                var edittext = ", is not available!";
                var result = client + edittext;

                if (textbox.value == 'Search...') {
                    alert('Please enter a Client Name to search for ');
                    textbox.focus();
                }
                else {
                    alert(result);
                };


            });


        </script>

当我在文本框上按回车键时，如何让文本框也触发该功能！

这是它在表单上的外观：

对这种编码非常陌生，任何帮助都可以！

谢谢！

【问题讨论】：

标签： javascript html asp.net-mvc-3 visual-studio-2012

【解决方案1】：

$('#searchbutton').click(search);
$('#SearchText').keypress(function(e){
     var code = (e.keyCode ? e.keyCode : e.which);
      if(code == 13) {
        search()
      }
});


function search(){
    var client = document.getElementById('SearchText').value;
            var textbox = document.getElementById('SearchText');
            var edittext = ", is not available!";
            var result = client + edittext;

            if (textbox.value == 'Search...') {
                alert('Please enter a Client Name to search for ');
                textbox.focus();
            }
            else {
                alert(result);
            };
}

【讨论】：

非常感谢！...这太棒了，简直不敢相信它是如此简单！谢谢 Karaxuna

【解决方案2】：

$('#SearchText').on('keypress', function(e){

    var code = (e.keyCode ? e.keyCode : e.which);
             if(code == 13) {
             //write your code for search here..like searchbutton on click
             }
    });

【讨论】：

可能还需要e.preventDefault()。

【解决方案3】：

我不知道您问题的确切答案，但您可以使用tabindex 按 Tab 跳转到您的按钮，然后您可以按 Enter 提交。

【讨论】：

【解决方案4】：

试试这个..

<input type="text" placeholder="Search" id="txtSearch"  />
<input type="button" value="Search" id="btnsearch" onclick="return Search();" />

<script type="text/javascript">
    $("#txtSearch").keyup(function (event) {

        if (event.keyCode == 13) {
            $("#btnsearch").click();
        }
    });

    function Search(){
             // do Something here.......
     }

</script>

【讨论】：