0

我之前看过表单，当您键入时，您可以在文本字段的一侧看到您的输入。

表格代码：

<form action="somewhere.html" method="get">
    <input type="text" name="fname" length="5" placeholder="your name">
    </form>

我将如何在此字段下方显示我的姓名（无需单击任何提交按钮）？

希望这有意义吗？

4

6 回答 6

1

将您的 HTML 和 Javascript 更改为以下内容： 

    <form action="somewhere.html" method="get">
        <input type="text" name="fname" id="fname" length="5" value="" onkeydown="javascript:showText();"> <br/>
        <span id="textShow"></span>
    </form>
<script type="text/javascript">
    var showText = function(){
         var oFName = document.getElementById('fname');
         var oTextShow = document.getElementById('textShow');

         if (oFName && oTextShow){
              oTextShow.innerHTML = oFName.value;
         }
    };
</script>

测试和验证@JSFiddle。我已经保存了供你测试。 http://jsfiddle.net/FkVfs/

于 2013-09-12T16:08:08.970 回答
0

每次击键都会触发一个键盘事件，而提交事件仅在提交表单时触发（通常通过提交按钮）。

这是关于键盘事件的参考：https ://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

于 2013-09-12T16:01:40.877 回答
0

您可以使用 javascript 事件侦听器来执行此操作。对于打字，该onkeydown事件将很有帮助。例如

<input type="text" name="fname" length="5" placeholder="your name" onkeydown="handleInput(this)">
...
于 2013-09-12T16:01:52.410 回答
0

试试这个：http: //jsfiddle.net/qxhX4/

$(document).on("keyup", "input[name=fname]", function() {
    $("span.fname").html($(this).val());
});

<form action="somewhere.html" method="get">
    <input type="text" name="fname" length="5" placeholder="your name">
    <span class="fname">Name will displayed here</span>
</form>

用 jQuery 做的简单。您只需要了解：

  • 事件处理
  • 选择器
  • 一些基本功能

如果您想了解更多信息，我推荐http://learn.jquery.com和http://jquery.com 。

于 2013-09-12T16:04:37.567 回答
0

您可以使用 jQuery：

html:

<form action="somewhere.html" method="get">
    <input id="fname" type="text" name="fname" length="5" placeholder="your name"><div></div>
</form>

javascript:

$('#fname').on('keyup', function() {
    var e = $(this);
    e.next().text(e.val());
});

http://jsfiddle.net/Recode/dk7MF/

于 2013-09-12T16:05:35.883 回答
0

如果我理解正确，您将需要使用 Javascript。

有些事情你应该知道。

PHP 是一种服务器端语言，这意味着除非您向服务器发送一些数据，否则您无法使用 PHP 做任何事情。类似的语言是 ruby​​ 和 python（在它们是服务器端语言的意义上类似）

Javascript 是一种客户端语言，这意味着您可以在不向服务器发送数据的情况下进行操作。

现在，作为一个例子，你有你的 HTML

<form action="somewhere.html" method="get">
    <input type="text" name="fname" length="5" placeholder="your name" onkeyup="diplayData()" id="fname">
</form>

<div id="information"></div>

现在你可以使用 Javascript 来做你正在寻找的东西

<script type="text/javascript">
    function displayData() {
        var data = document.getElementById("fname").value;

        document.getElementById("information").innherHTML = data;
    }
</script>

这是一个基本示例，您可以对数据做任何您需要的事情。我建议使用 jQuery，你倾向于用它编写更少的 Javascript。

于 2013-09-12T16:06:36.797 回答