Question

我通常不喜欢打扰你们，但是我被困在某个地方，我无法在任何地方找到答案，希望你们能帮助我！

我正在构建一个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";
}

谢谢你们！

Answer 1

添加到您的输入onchange侦听器：

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

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

Answer 2

我不知道你是否反对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设置颜色或启用状态，而不是以前的代码。由你决定。

Answer 3

的 jsFiddle Demo 的

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

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

JS

$('#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); });

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

更多信息会有所帮助。

在用户输入时运行javascript函数

4 个答案: