在用户输入时运行 javascript 函数答案

【问题标题】：Run a javascript function as user is inputting在用户输入时运行 javascript 函数
【发布时间】：2013-10-16 03:09:18
【问题描述】：

我通常不喜欢打扰大家，但我遇到了一些事情，我无法在任何地方找到答案，希望你们能帮助我！

我正在构建一个 Web 应用程序并对其进行设计，以便界面与 iOS7 匹配。 http://danj.eu/webdesign/new

我有一个输入表单，我需要提交表单的按钮，只有在验证完成后才会变为蓝色并变为可选状态。我写了一些 JS 来验证输入，但这只运行一次！每次用户修改输入值时，我都需要运行该函数。

这是迄今为止我为 JS 准备的内容：

function validateInput(){        
if (document.getElementById('projectname').value.length < 2)
    document.getElementById('forwardbutton').style.color = "#c4c4c5";
else
    document.getElementById('forwardbutton').style.color = "#0e81ff";
}

谢谢大家！

【问题讨论】：

标签： javascript jquery html forms input

【解决方案1】：

添加到您的输入 onchange 听众：

var input = document.getElementById("myInput");
input.addEventListener('change', validateInput, false);

这将在每次值更改时触发validateInput 函数。 PS。你应该缓存你在验证函数中获得的 DOM 元素，因为它总是在函数被触发时搜索 DOM 以找到它们——这在大 DOM 树中可能很重

【讨论】：

getElementById 参数有错别字

【解决方案2】：

jsFiddle Demo

您可以使用 jquery 绑定到输入事件，它同时处理几乎所有输入事件

<input id="myInput" type="text" />
<div id="output"></div>

$('#myInput').bind('input',function(){
 if( this.value.length < 2 ){
  document.getElementById('output').style.color = "#c4c4c5";   
 }else{
  document.getElementById('output').style.color = "#0e81ff";
 }
 $('#output').html(this.value);
});

【讨论】：

这太棒了！我将使用您的答案，因为它非常适合我的需要。也感谢您花时间制作演示！

【解决方案3】：

我不知道你是否反对 jQuery，但我会提供 jQuery 的方式来做这件事。使用 jQuery 非常简单。您将使用键盘事件处理程序，特别是 Key Up event handler。

在您的事件处理程序中，您将检查字段的长度，并根据长度设置按钮的启用或禁用状态。

$('#input-element').keyup(function () {

    if (document.getElementById('projectname').value.length < 2)
        document.getElementById('forwardbutton').style.color = "#c4c4c5";
    else
        document.getElementById('forwardbutton').style.color = "#0e81ff";
    }

});

您也可以使用 jQuery 来设置颜色或启用状态，而不是之前的代码。由你决定。

【讨论】：

【解决方案4】：

你是说

function validateInput(){        
if (document.getElementById('projectname').value.length < 2)
    document.getElementById('forwardbutton').style.color = "#c4c4c5";
else
    document.getElementById('forwardbutton').style.color = "#0e81ff";
}

然后也许是这个？

document.getElementById('projectname').onchange=validateInput;

更多信息会有所帮助。

【讨论】：