Изменение атрибутов HTML-тегов с помощью JavaScript - PullRequest
Новая
       24

Изменение атрибутов HTML-тегов с помощью JavaScript

1 голос
/ 16 мая 2011

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

Но то, как я это получил на своем сайте, сильно ухудшается. Потому что я пропустил метки для полей и использовал заполнитель в качестве метки.

На данный момент у меня есть несколько полей ввода с заполнителями, они выглядят так: 

<input placeholder="hereismyplaceholder" />

Но там, где поддержка заполнителей HTML5 недоступна, я бы хотел, чтобы все поля ввода с заполнителями изменились на это. Очевидно с их эквивалентным текстом заполнителя: 

<input onblur="if (this.value == '') {this.value = 'hereismyplaceholder';}" onfocus="if (this.value == 'hereismyplaceholder') {this.value = '';}" value="hereismyplaceholder" />

Итак, я включил Modernizr и получаю его для обнаружения заполнителей с помощью следующего javascript: 

if (Modernizr.input.placeholder) {
} else {
// BUT I NEED SOMETHING IN HERE
}

Но я понятия не имею, что теперь делать. Поскольку у меня нет опыта работы с javascript, я не разработчик.

Самое простое решение будет лучшим, пожалуйста. Меня не смущает хорошая практика, я просто хочу, чтобы она сработала.

Ответы [ 2 ]

0 голосов
/ 16 мая 2011

Вы не спрашивали о jQuery, но я не хотел беспокоиться о проблемах с кросс-браузером: 

if (!Modernizr.input.placeholder) {
  $("input[type=text]")
  .focus(function(e){
      if (this.value == $(this).attr('placeholder')) {
         this.value = '';
      }         
  })
  .blur(function(e){
    setPlaceholder(this);
  }).each(function(index, el){
    setPlaceholder(el);
  });

  function setPlaceholder(el) {
    if (el.value  == '') {
        el.value = $(el).attr('placeholder');
    }
  }
}
0 голосов
/ 16 мая 2011

Здесь есть пример, http://www.modernizr.com/docs/#input

Для вашего конкретного случая использования код должен быть 

// if placeholder isn't supported:
if (!Modernizr.input.placeholder){
  // use a input hint script
  setInputHint(document.getElementById('idoftheinputelement'),'hereismyplaceholder');
}
...