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

以下几点注意事项：

You are using onclick - while that may work, I think what you want is onfocus.
As far as I know, it is not necessary to return false; on either of these events.

虽然以上内容将使用普通的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

有没有办法我只能制作一个CSS id和一个javascript函数来更改所有输入？

是的，只需将一个事件处理程序作为函数进行赋值，就可以将其附加到多个元素；subject元素以“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>

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

友情链接