Question

我在您输入之前看到过表单，您可以在文本字段的旁边看到您的输入。

表单代码：

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

如何在此字段下方显示我的姓名（不点击任何提交按钮）？

希望这有道理吗？

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

Answer 2

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

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

Answer 3

您可以使用javascript事件侦听器执行此操作。对于输入，onkeydown事件将有所帮助。 E.g。

<input type="text" name="fname" length="5" placeholder="your name" onkeydown="handleInput(this)">
...

Answer 4

试试这个：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。

Answer 5

你可以使用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/

Answer 6

如果我理解正确，您将需要使用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。

显示表单输入而不提交

6 个答案: