JavaScript帮助表单？

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事件很难看,但第一个应该有效.