Очистить содержимое текстового поля по умолчанию с помощью jQuery - PullRequest
Новая
       19

Очистить содержимое текстового поля по умолчанию с помощью jQuery

0 голосов
/ 29 июля 2010

У меня есть панель входа в систему, которую можно использовать для входа в 2 разные системы в зависимости от того, какое значение пользователь выбирает из раскрывающегося списка. А затем я предоставляю значения по умолчанию для заполнения каждого текстового поля в зависимости от того, какой логин выбран пользователем. Тем не менее, чтобы упростить для пользователя задачу, очистив содержимое по умолчанию, когда текстовое поле получает фокус, а затем повторно заполнив его на размытие. 

 $('#logintype').change(function() {
  if ($(this).val() == 1) {
   $('#loginf').attr('action','login1.php');
   $('#loginf #user').attr('name', 'userid').attr('defaultValue', 'Username').val('Username');
   $('#loginf #pass').attr('name', 'password').attr('defaultValue', 'password').val('password');
  }
  else {
   $('#loginf').attr('action','login2.php');
   $('#loginf #user').attr('name', 'email').attr('defaultValue', 'Email').val('Email');
   $('#loginf #pass').attr('name', 'passed_password').attr('defaultValue', 'password').val('password');
  };
 });

 $('.textbox').focus(function(){
  if ($(this).val() == $(this).attr('defaultValue')) {
   $(this).val('');
  };
 });

 $('.textbox').blur(function(){
  if ($(this).val() == '') {
   $(this).val($(this).attr('defaultValue'));
  };
 });

Есть ли более эффективный способ сделать это? Я чувствую, что повторяюсь, и это никогда не бывает хорошо. Буду также признателен за комментарии о том, является ли это хорошей идеей с точки зрения пользовательского опыта.

Ответы [ 4 ]

3 голосов
/ 29 июля 2010

Вы также можете использовать HTML5-атрибут "заполнитель" с кросс-браузерной совместимостью, используя html5placeholder.jquery.js Майка Тейлора; он будет использовать встроенную поддержку браузера, если он доступен: http://github.com/miketaylr/jQuery-html5-placeholder/blob/master/html5placeholder.jquery.js

2 голосов
/ 29 июля 2010

Во-первых, то, что у вас есть, совершенно верно . Единственные изменения, которые я могу предложить, это использовать .data() и $.data(), чтобы сделать его действительным (без недопустимых атрибутов). Вы можете связать обработчики .focus() и .blur(), чтобы избежать дублирования выбора. Также нет необходимости в #loginf перед другим селектором идентификаторов ... они должны быть уникальными и просто #ID имеет ярлык в коде ядра jQuery.

Кроме того, я немного изменил его, чтобы сделать его более расширяемым, чтобы вы могли добавлять столько, сколько хотите, с меньшим количеством кода, как вы делаете, например: 

var types = { "1": { action: "login1.php", 
                     user: { id: "userid", val: "Username" },
                     pass: { id: "password", val: "password" } },
              "2": { action: "login2.php", 
                     user: { id: "email", val: "Email" },
                     pass: { id: "passed_password", val: "password" } } 
            };
$('#logintype').change(function() {
  var type = types[$(this).val()];
  $('#loginf').attr('action', type.action);
  $('#user').attr('name', type.user.id).data('defaultValue', type.user.val).val(type.user.val);
  $('#pass').attr('name', type.pass.id).data('defaultValue', type.pass.val).val(type.pass.val);
}).change();

 $('.textbox').focus(function(){
  if ($(this).val() == $.data(this, 'defaultValue')) $(this).val('');
 }).blur(function(){
  if ($(this).val() == '') $(this).val($.data(this, 'defaultValue'));
 });​

Вы можете попробовать здесь , лично мне просто нравится этот стиль на случай, если вам понадобится добавить третий вариант позже, это делает его очень быстрым / простым (хотя, возможно, ваш текущий метод все еще делает это довольно просто). Однако, по мере того, как вы будете добавлять больше, вы будете сохранять все больше и больше кода на этом маршруте по сравнению с вашим текущим способом, но он полностью зависит от вашего стиля, в любом случае это не имеет большого значения.

0 голосов
/ 29 июля 2010

Не продавайте устаревшие новости.

http://plugins.jquery.com/project/placeholder

0 голосов
/ 29 июля 2010

демо

без .data() этого также можно добиться, так как 

$('#logintype').change(function() {
  if ($(this).val() == 1) {
   $('#loginf').attr('action','login1.php');
   $('#user').attr('name', 'userid')[0].defaultValue = 'Username';
   $('#pass').attr('name', 'password')[0].defaultValue= 'password';
  }
  else {
   $('#loginf').attr('action','login2.php');
   $('#user').attr('name', 'email')[0].defaultValue = 'Email';
   $('#pass').attr('name', 'passed_password')[0].defaultValue = 'password';
  };
 });

 $('.textbox').focus(function(){
  if (this.value == this.defaultValue) {
   this.value = '';
  };
 }).blur(function(){
  if (this.value == '') {
   this.value = this.defaultValue;
  };
 });

также может попробовать этот вариант 

$('#logintype').change(function() {
    var bol = ($(this).val() == 1);
    $('#loginf').attr('action',bol?'login1.php':'login2.php');
    $('#user').val(bol?'Username':'Email').attr('name', 'userid')[0].defaultValue = bol?'Username':'Email';
    $('#pass').attr('name', bol?'password':'passed_password')[0].defaultValue= 'password';
});

$('.textbox').focus(function(){
    if (this.value == this.defaultValue) {
        this.value = '';
    };
}).blur(function(){
    if (this.value == '') {
        this.value = this.defaultValue;
    };
});
​
...