Question

所以，我有一个由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等。

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

Answer 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事件很难看，但第一个应该有用。

Answer 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元素属性中编写的代码量。

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

Answer 4

以下是使用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>

Answer 5

有没有办法只能制作一个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>

JavaScript帮助表单？

5 个答案: