ненавязчивый текст «по умолчанию» на входе без jQuery - PullRequest
Новая
       48

ненавязчивый текст «по умолчанию» на входе без jQuery

0 голосов
/ 18 мая 2010

Я пытаюсь написать на входе ненавязчивый текст по умолчанию / заполнитель (фактически, относительно размещенный label над input, который скрывается на onFocus, а остается скрытым , если ввод не пусто в onBlur), но я не хочу использовать jQuery, потому что это единственный javascript, используемый на странице - поэтому использование jQuery кажется немного чрезмерным.

Пожалуйста, как мне сделать это без jQuery?

Спасибо.

РЕДАКТИРОВАТЬ: Я знаю эту идею (getElementByID), но я больше смотрю, как добавить его в документ - желательно то, что вы использовали ранее. Спасибо.

РЕДАКТИРОВАТЬ: Спасибо всем, я наконец-то пошел с jQuery, видя ответы:] (мой пример здесь: http://jsbin.com/ehega/3 - это концепция, я, вероятно, добавлю больше глазного конфетки. В ответ мне Роберт Коритник - из-за действительных очков ... и стиля;])

Ответы [ 7 ]

3 голосов
/ 18 мая 2010

вам нужно будет вручную прикрепить события onfocus и onblur, получив дескриптор ввода с getElementById.

вот пример: http://www.aspsnippets.com/Articles/Watermark-TextBox-using-JavaScript.aspx

2 голосов
/ 18 мая 2010

Вот как бы я это сделал, без JQuery. Он отображает элемент управления, когда показывает текст по умолчанию, и позволяет вводить текст по умолчанию, если это необходимо. Тег «title» будет возвращаться к всплывающей подсказке для людей, которые отключают JavaScript: 

<html>
<body>
<input type="text" value="" title="default text"  />

<script type="text/javascript">
function DefaultInput(e) {
    // Get the elements
    this.e = e
    this.d = e.title
    this.s = e.style
    e.removeAttribute('title') // remove the tooltip
    e.value = '' // IE cached value remove HACK!

    // Bind the events
    e.onblur = this.bind(this.onblur)
    e.onfocus = this.bind(this.onfocus)

    // Show the initial value in gray
    this.onblur()
}

DefaultInput.prototype = {
    bind: function(f) {
        // Return `f` so it's always called as an object of DefaultInput
        var o = this
        return function(){
            f.apply(o, arguments)
        }
    },

    onblur: function() {
        // Gray out my value and show the default text if my value's blank
        if (!this.h && !this.e.value) {
            this.s.color = 'gray'
            this.e.value = this.d
            this.h = true // true -> help text displayed
                          // false -> help text hidden/user entered value
        }
    },

    onfocus: function() {
        // Make the text black and blank the text if in "help" mode
        if (this.h) {
            this.s.color = 'black'
            this.e.value = ''
            this.h = false
        }
    }   
}

// Make sure the page is loaded before 
// running for twitchy browsers like IE
window.onload = function() {
    // Add defaults for all text input elements which have a `title`
    var L = document.getElementsByTagName('input')
    for (var i=0; i<L.length; i++) {
        var e = L[i]
        if (e.type=='text' && 'title' in e)
            new DefaultInput(e)
    }
}
</script>
</body>

РЕДАКТИРОВАТЬ: Немного прояснили комментарии, исправили некоторые ошибки IE и сделали так, что он ищет теги <input> с title, чтобы сделать так, чтобы на разных страницах было меньше времени конвертации чем индивидуально инициализировать элементы управления вводом; -)

2 голосов
/ 18 мая 2010

Вы можете использовать jQuery и при этом быть ненавязчивым и использовать возможности браузеров HTML5, сделайте ваш ввод следующим образом: 

<input type="whatever" placeholder="Your Default Text"/>

Я пользователь Modernizr , чтобы проверить html5-возможности браузера, и если браузер не понимает атрибут placeholder, чем я использую этот маленький javascript для эмуляции этой функции. 

if (!Modernizr.input.placeholder) {
  $('input').each(function(){
    var obj = $(this);
    var placeholder = obj.attr('placeholder');
    if (placeholder) {
      obj.val(placeholder);
      obj.focus(function(){
        var obj2 = $(this);
        if (obj2.val() == obj2.attr('placeholder')) obj2.val('');
      });
      obj.blur(function(){
        var obj2 = $(this);
        if (obj2.val() == '') obj2.val(obj2.attr('placeholder'));
      });
    }
  });
}

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

2 голосов
/ 18 мая 2010

Я предлагаю вам использовать jQuery

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

Нет? Затем сделайте это вручную, но сделайте его более пригодным для повторного использования

Но если вы решили сделать что-то вручную, вы всегда можете использовать обычный Javascript и манипулировать DOM по своему усмотрению. Вы лучшие друзья в этом случае, конечно, были бы (как отметил Эндрю):

  • getElementById() и
  • getElementsByTagName()

функций, но так как вы будете манипулировать DOM и стилями, убедитесь, что вы тестируете свой код на всех распространенных браузерах. Если вы используете настраиваемые атрибуты для элементов INPUT, хорошо использовать вторую функцию, поэтому вы добавите дополнительные функциональные возможности сразу ко всем входам и только к тем, которые определяют этот конкретный настраиваемый атрибут, например: 

<input type=text id="inputX" name="inputX" placeholder="Enter something">

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

Просто sidenote : пример Эндрю работает несколько иначе, чем вы сказали бы (используя метки), но я предлагаю вам использовать тот же подход, потому что вы все равно будете запускать скрипты. Ради ненавязчивости убедитесь, что вы устанавливаете содержимое по умолчанию с помощью Javascript, чтобы значения и стили по умолчанию для текстовых полей не устанавливались для тех пользователей, которые не используют Javascript.

1 голос
/ 18 мая 2010

Вот как я это делаю:

Пример работы в Интернете

http://jsbin.com/ehivo3 ( исходный код )

HTML 

<input type="text" name="myfield" id="myfield" value="Please, fill my field!!!" />

JQuery 

$(document).ready(function() {
  // Handle each input on focus() and blug()
  $('input[type="text"]').each(function() {
    $(this)
      // Store the default value internally
      // Don't use .val() because browser autofill will poison it
      .data('defaultValue', $(this).attr('value'))
      // Handle the focus() (when you enter the field)
      .focus(function() {
        if ($(this).val() == $(this).data('defaultValue'))
          $(this).val('');
      })
      // Handle the blur() (when you leave the field)
      .blur(function() {
        if ($(this).val() == '')
          $(this).val($(this).data('defaultValue'));
      });
  });

  // Clear all fields with "default value" on submit
  $('form').submit(function() {
    $('input[type="text"]', $(this)).each(function() {
      // If the input still with default value, clean it before the submit
      if ($(this).val() == $(this).data('defaultValue'))
        $(this).val('');
    });
  });
});

И это все! Нет недопустимых или дополнительных атрибутов, допустимая разметка и все обработано в вашем файле jQuery. :)

1 голос
/ 18 мая 2010 
<input name="test" type="text" id="test" value="testValue" />

<script type="text/javascript">
 var myInput = document.getElementById("test");
 myInput.onfocus = function() {
   this.value = '';
 }
  myInput.onblur = function() {
   if(this.value == '') this.value = "testValue";
}
</script>
1 голос
/ 18 мая 2010

Я думаю, что вам нужно что-то вроде этого:

<input type="text" onfocus="if (this.value == this.getAttribute('mydefaulttext')) this.value = '';" onblur="if (this.value == '') this.value = this.getAttribute('mydefaulttext');" mydefaulttext="click here..." value="click here..."/>

...