3

我通常不喜欢打扰大家，但我被困在某件事上，在任何地方都找不到答案，希望你们能帮助我！

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

多谢你们！

4

4 回答 4

3

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

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

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

于 2013-10-08T23:48:40.310 回答
1

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

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

$('#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 来设置颜色或启用状态，而不是之前的代码。由你决定。

于 2013-10-08T23:51:58.287 回答
1

jsFiddle Demo

您可以使用 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);
});
于 2013-10-08T23:53:31.167 回答
0

你的意思是

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;

更多信息会有所帮助。

于 2013-10-08T23:51:06.010 回答