当用户在HTML中点击回车键时，我如何将输入打印到屏幕上

How can I print users input to screen on when they hit return in HTML

本文关键字：输入 打印 屏幕 HTML 用户 回车      更新时间：2024-02-07

我有几个文本框供用户填写。他们会在其中输入一些内容，然后按"回车"键。一旦他们按下回车键，我需要将他们输入的数据显示在下面的文本框中。这必须在一个网页上完成，我无法理解。我不能使用HTML5的'output'标记，因为这必须与Internet Explorer配合使用。

<input name="idStn1" type="text" />

这里是另一个例子，更接近您最初的请求。

jsFiddle演示

HTML:

<div>Type some text in the fields below and press Enter key</div>
First Name: <input id="fname" class="dataentry" type="text" /><span></span>
Last Name: <input id="lname" class="dataentry" type="text" /><br />
<input id="fname_text" type="text" disabled="disabled" /><span></span>
<input id="lname_text" type="text" disabled="disabled" />

javascript/jQuery:

var thisid, theval, currInput;
var textboxes = $("input.dataentry");
$("input:text").on("keydown", function(event) {
        // track enter key
        var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
        if (keycode == 13) { // keycode for enter key
            //get val of current input and stick into paired view-only field
            theval = $(this).val();
            thisid = $(this).attr('id');
            $('#' +thisid+ '_text').val(theval);
            //select the next input box
            currInput = textboxes.index(this);
            textboxes[currInput+1].focus();
            return false;
        } else  {
            return true;
        }
    }); // end of function

以下代码将允许您在指定的输入字段中按Enter键来单击按钮：

jsFiddle演示

HTML:

First Name: <input id="fname" type="text" /><br />
Last Name: <input id="lname" type="text" /><br />
Age: <input id="myAge" type="text" /><br />
Email: <input id="emailadd" type="text" /><br />
<input type="button" id="mybutt" value="Go" />

javascript/jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $("#emailadd").on("keydown", function(event) {
            // track enter key
            var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
            if (keycode == 13) { // keycode for enter key
                // force the 'Enter Key' to implicitly click the #mybutt button
                $('#mybutt').click();
                return false;
            } else  {
                return true;
            }
        }); //END #emailadd.click
        $('#mybutt').click(function() {
            alert( 'Hey, you clicked mybutt' );
        });
    }); //END document.ready()
</script>

此代码使用jQuery javascript库，因此必须引用此库（通常在文档的头标签中），因此：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
相关文章：