在不提交的情况下显示表单输入


Show form input without submitting

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

表单代码:

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

如何在此字段下方显示我的名字(无需单击任何提交按钮)?

希望这有意义吗?

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

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

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

你可以用javascript事件侦听器来做到这一点。 对于键入,onkeydown事件将有所帮助。 例如

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

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

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

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