JavaScript 对表单的帮助？答案

【问题标题】：JavaScript help with forms?JavaScript 对表单的帮助？
【发布时间】：2009-04-07 20:14:51
【问题描述】：

所以，我有一个包含 4 个输入的表单：用户名、密码、电子邮件和姓名。

我厌倦了必须为它们中的每一个制作一个 javascript 函数，因为每个输入都是一个文本输入，当用户单击输入框时，我让它将输入的背景更改为不同的颜色。

这就是我的编码方式：

表单输入：

<input type="text" name="username" id="usernameInput" onclick="changeUsername(); return false;" onblur="changeUsernameback(); return false;">

<input type="text" name="password" id="passwordInput" onclick="changePassword(); return false;" onblur="changePasswordback(); return false;">

另外两种形式是一样的，只是名称不同，id和javascript函数不同。

我的 Javascript：

function changeUsername() {
 document.getElementById('usernameInput').style.background='#FFFF00';
}

function changeUsernameBack() {
 document.getElementById('passwordInput').style.background='#FFFF00';
}

其他三个都是这样，只为自己的特定id设置。

并且在创建 CSS 时，我必须为所有 4 个输入创建不同的 ID。

我想知道的是：有没有一种方法我只能制作一个 CSS id 和一个 javascript 函数来更改所有输入？因为我知道当您只使用一个函数时，javascript 会尝试一次更改所有内容..

我在想类似的事情

document.getElementById('inputText'+[i]).style.background='#FFFF00';

然后当我给每个输入一个 id 时，我可以在页面上自动增加它们，例如 input1、input2、input3 等。

但这似乎不起作用？也许我编码错了？请帮忙..

【问题讨论】：

标签： javascript forms

【解决方案1】：

你可以这样做：

<input type="text" name="username" id="usernameInput" onfocus="change(this);" onblur="changeBack(this);">
<input type="text" name="password" id="passwordInput" onfocus="change(this);" onblur="changeBack(this);">

有了这个javascript：

function change(el) {
    el.style.background='#FFFF00';
}

function changeBack(el) {
    el.style.background='#FFFF00';
}

几点说明：

您正在使用 onclick - 虽然这可能有效，但我认为您想要的是 onfocus。
据我所知，在这些事件中没有必要return false;。

虽然上述内容适用于纯 Javascript，但我不得不建议使用 jQuery 方式：

<input type="text" name="username" id="usernameInput">
<input type="text" name="password" id="passwordInput">

然后用 jQuery 做这个：

$(function() {
    $('input').focus(function() {
        $(this).css('background-color', '#FFFF00');
    }).blur(function() {
        $(this).css('background-color', '#FFFF00');
    });
});

我个人觉得这样更简洁，因为内联 javascript 事件很难看，但第一个应该可以工作。

【讨论】：

我理解你为什么包含对 jQuery 的推荐（因为其他人都在建议它）。但这是一位 JavaScript 作者，他不得不问如何使一个函数更通用地更改输入的背景颜色。我认为 jQuery 在这一点上只会让他感到困惑。
我只是想把它扔进去，但你绝对是对的。

【解决方案2】：

<input type="text" name="whatever" id="uniqueVal" onclick="return gotFocus(this);" onblur="return lostFocus(this);">

function gotFocus(el) {
    el.style.background = 'Red';
    return false;
}

function lostFocus(el) {
    el.style.background = 'Blue';
    return false;
}

我个人喜欢从这些类型的函数中返回 false 以减少我必须在 HTML 元素属性中编写的代码量。

【讨论】：

【解决方案3】：

您应该尝试使用 jQuery - 这就是我们使用的。使用 jQuery 会非常简单。

<script>
$(document).ready(function(){
  $(".PrettyInput")
    .focus(function() { $(this).css("background-color", "#FFFF00"); })
    .blur(function() { $(this).css("background-color", "#FFFF00"); });
});
</script>

<html>
<body>
  Username: <input type="text" class="PrettyInput" />
  Password: <input type="text" class="PrettyInput" />
</body>
</html>

【讨论】：

【解决方案4】：

有没有一种方法可以让我只创建一个 CSS id 和一个 javascript 函数来更改所有输入？

是的，您可以将一个事件处理程序附加到多个元素，只需将其分配为函数即可；主题元素以“this”形式出现。你甚至不需要身份证。

为了完整起见，因为似乎没有其他人说过，所以很有可能在不拖入整个 jQuery 的情况下拥有非内联、不显眼的事件处理程序的优点（如果你想要的话，这可能有点过分是一些突出显示的输入）：

<input type="text" name="username" />
<input type="text" name="password" />

<script type="text/javascript">
    function inputFocussed() {
        this.style.backgroundColor= 'yellow';
    };
    function inputBlurred() {
        this.style.backgroundColor= 'white';
    };

    // Bind to input[type=text]
    //
    var inputs= document.getElementsByTagName('input');
    for (var i= inputs.length; i-->0;) {
        if (inputs[i].type=='text') {
            inputs[i].onfocus= inputFocused;
            inputs[i].onblurred= inputBlurred;
    }   }
</script>

【讨论】：

【解决方案5】：

这是一个使用 jQuery 的完整示例。

<html>   

  <head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
      $("input:text")
        .focus(function() { $(this).css("background-color", "#FFFF00"); })
        .blur(function() { $(this).css("background-color", "#FFFFFF"); });
      });
    </script>

  </head>         

  <body>

    <form>
      Username: <input type="text" /> 
      Password: <input type="text" />   
    </form>

  </body>

</html>

【讨论】：