JavaScript поможет с формами? - PullRequest
Новая
       3

JavaScript поможет с формами?

0 голосов
/ 08 апреля 2009

Итак, у меня есть форма, которая состоит из 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;">

и две другие формы одинаковы, только с разными именами и разными идентификаторами и функциями javascript.

МОЙ Javascript: 

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

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

, а остальные три точно такие же, только для своего собственного идентификатора.

И при создании CSS я должен сделать разные идентификаторы для всех 4 входов.

Что я хочу знать: есть ли способ, которым я могу сделать только один идентификатор CSS и одну функцию javascript, чтобы изменить все входные данные? Потому что я знаю, когда вы просто используете одну функцию для всех, javascript пытается изменить все сразу ..

Я думал что-то вроде 

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

и затем, когда я присваиваю каждому входу идентификатор, я могу просто автоматически увеличивать их на странице, например, input1, input2, input3 и т. Д.

Но это не похоже на работу? Может я неправильно это кодирую? Пожалуйста, помогите ..

Ответы [ 5 ]

7 голосов
/ 08 апреля 2009

Вы МОЖЕТЕ сделать это: 

<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 ужасны, но первое должно работать.

1 голос
/ 08 апреля 2009

Вы должны попробовать использовать 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>
1 голос
/ 08 апреля 2009 
<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.

0 голосов
/ 08 апреля 2009

Есть ли способ, которым я могу сделать только один идентификатор CSS и одну функцию javascript, чтобы изменить все входные данные?

Да, вы можете прикрепить один обработчик событий ко многим элементам, просто назначив его как функцию; предметный элемент входит как «это». Вам даже не нужно удостоверение личности.

Для полноты, поскольку никто другой, кажется, не сказал этого, вполне возможно иметь преимущества не встроенных, ненавязчивых обработчиков событий, не перетаскивая весь 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>
0 голосов
/ 08 апреля 2009

Вот полный пример использования 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...