我以前见过表单,当您键入时,您可以在文本字段的一侧看到您的输入。
表单代码:
<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。