使用Javascript动态显示输入值 [英] Dynamically displaying input values using Javascript
问题描述
想象一下，如果我有一个文本输入用于输入你的名字。当你输入时，我也希望你的名字出现在网页的不同部分。
我会如何以最简单的方式完成这项工作？
（请参阅下面的更新，我后来意识到，我完全忘记了使用鼠标操作将粘贴文本处理到字段中。）
你可以钩住 keypress 事件（你可能需要 keydown 和 keyup ）并将其用于触发其他位置的DOM元素更新。例如：
var nameField = document.getElementById（'nameField'）;
nameField.onkeydown = updateNameDisplay;
nameField.onkeyup = updateNameDisplay;
nameField.onkeypress = updateNameDisplay;
function updateNameDisplay（）{
document.getElementById（'nameDisplay'）。innerHTML = this.value || ??;
}
这是一个使用DOM0风格事件处理程序的非常基本的示例（onXyz属性，我不通常喜欢）。做这些事情的最简单的方法是使用像 jQuery ， Prototype ， YUI ， 关闭或其他几种。他们会平滑浏览器的差异，让你专注于你实际正在做的事情。
以上是使用jQuery：
$（'＃nameField'）。bind（'keydown keyup keypress'，function（）{
$（'＃nameDisplay'）。 html（this.value ||??）;
}）;
更新：实际上，就像使用鼠标粘贴到现场一样。你会认为更改处理程序对此很有帮助，但在焦点离开该字段之前它不一定会触发，所以使用这样的定时过程并不罕见：
JavaScript，无库：
var nameField = document。的getElementById（ '名称字段'）;
var lastNameValue = undefined;
updateNameDisplay（）;
setInterval（updateNameDisplay，100）;
function updateNameDisplay（）{
var thisValue = nameField.value || ??;
if（lastNameValue！= thisValue）{
document.getElementById（'nameDisplay'）。innerHTML = lastNameValue = thisValue;
}
}
您应该避免为每个字段分别添加一个，为它们全部使用一个计时器），并且您需要根据实际需要调整计时器 —敏感的是，当你这样做时，你会消耗资源。如果你想在某个阶段停止检查（这是一个好主意），保存返回值 setInterval ：
var timerHandle = setInterval（updateNameDisplay，100）;
...并停止循环：
clearInterval（timerHandle）;
timerHandle = 0;
下面是一个更完整的动态监视字段的例子，只有在场有焦点时才使用定时器。我在这个例子中使用了jQuery，因为它简化了它，并且你问了简单的问题（如果你使用另一个库或者不使用任何库，你可以很容易地移植它;主要的地方jQuery在这种情况下是有用的在表单中找到输入）：
jQuery（function（$）{
var formTimer = 0，
currentField，
lastValue;
updateWatchingIndicator（）;
$（'＃theForm：input'）
.focus（startWatching）
。模糊（stopWatching）
.keypress（updateCurrentField）;
函数startWatching（）{
stopWatching（）;
currentField = this;
lastValue = undefined ;
formTimer = setInterval（updateCurrentField，100）;
updateWatchingIndicator（）;
}
function stopWatching（）{
if（formTimer！= 0 ）{
clearInterval（formTimer）;
formTimer = 0;
}
currentField = undefined;
lastValue = un定义;
updateWatchingIndicator（）;
}
函数updateCurrentField（）{
var thisValue;
if（currentField&& currentField.name）{
thisValue = currentField.value || ??;
if（thisValue！= lastValue）{
lastValue = thisValue;
$（'＃'+ currentField.name +'Display'）。html（thisValue）;
函数updateWatchingIndicator（）{
var msg;
if（currentField）{
msg =（Watching，field =+ currentField.name +）;
}
else {
msg =（Not watching）;
}
$（'＃watchingIndicator'）。html（msg）;
}
}）;
I have a form, and I want to dynamically display certain elements of the form as soon as they are filled out.
Imagine if I had a text input for your name. As you type, I also want your name to appear in a different part of the webpage.
How would I accomplish this in the simplest manner?
(See below for an update, I realized later I'd completely forgotten to handle pasting text into the field using a mouse action.)
You can hook the keypress event (you'll probably want keydown and keyup as well) on the text input field and use it to trigger an update of a DOM element elsewhere. For instance:
var nameField = document.getElementById('nameField');
nameField.onkeydown = updateNameDisplay;
nameField.onkeyup = updateNameDisplay;
nameField.onkeypress = updateNameDisplay;
function updateNameDisplay() {
document.getElementById('nameDisplay').innerHTML = this.value || "??";
}
That's a very basic example using a DOM0-style event handler (the "onXyz" property, which I don't normally like). The simplest way to do these things is to use a library like jQuery, Prototype, YUI, Closure, or any of several others. They'll smooth over browser differences for you and let you focus on what you're actually trying to do.
Here's the above using jQuery:
$('#nameField').bind('keydown keyup keypress', function() {
$('#nameDisplay').html(this.value || "??");
});
Update: Actually, the above will miss things like pasting into the field using the mouse. You'd think a change handler would be good for this, but it doesn't necessarily fire until focus leaves the field, so it's not uncommon to use a timed process like this:
JavaScript, no library:
var nameField = document.getElementById('nameField');
var lastNameValue = undefined;
updateNameDisplay();
setInterval(updateNameDisplay, 100);
function updateNameDisplay() {
var thisValue = nameField.value || "??";
if (lastNameValue != thisValue) {
document.getElementById('nameDisplay').innerHTML = lastNameValue = thisValue;
}
}
You'll want to avoid having a separate one of these for each field (instead, use a single timer for all of them) and you'll want to adjust the timer according to what you actually need — be sensitive to the fact that when you're doing this, you're consuming resources. If you'll want to stop the check at some stage (and it's a good idea), save the return value from setInterval:
var timerHandle = setInterval(updateNameDisplay, 100);
...and stop the loop like this:
clearInterval(timerHandle);
timerHandle = 0;
Here's a more complete example of dynamically watching fields, only using the timer when a field has focus. I've used jQuery for this example because it simplifies it and you did ask for simple (if you use another library or don't use any library, you can probably port this easily enough; the main place jQuery is useful in this case is in finding the inputs within the form):
jQuery(function($) {
var formTimer = 0,
currentField,
lastValue;
updateWatchingIndicator();
$('#theForm :input')
.focus(startWatching)
.blur(stopWatching)
.keypress(updateCurrentField);
function startWatching() {
stopWatching();
currentField = this;
lastValue = undefined;
formTimer = setInterval(updateCurrentField, 100);
updateWatchingIndicator();
}
function stopWatching() {
if (formTimer != 0) {
clearInterval(formTimer);
formTimer = 0;
}
currentField = undefined;
lastValue = undefined;
updateWatchingIndicator();
}
function updateCurrentField() {
var thisValue;
if (currentField && currentField.name) {
thisValue = currentField.value || "??";
if (thisValue != lastValue) {
lastValue = thisValue;
$('#' + currentField.name + 'Display').html(thisValue);
}
}
}
function updateWatchingIndicator() {
var msg;
if (currentField) {
msg = "(Watching, field = " + currentField.name + ")";
}
else {
msg = "(Not watching)";
}
$('#watchingIndicator').html(msg);
}
});
这篇关于使用Javascript动态显示输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
