ненавязчивый текст по умолчанию во вводе БЕЗ jQuery

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

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

Спасибо.

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

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


javascript input html label textinput
person Adam Kiss    schedule 18.05.2010    source источник
comment
Реализовав в прошлом подсказки на голом железе, я вам скажу, что вы с головой бежите в мир боли. Аспект xbrowser этой задачи съест вас заживо. Библиотека xbrowser необходима для такого рода задач.   -  person Sky Sanders    schedule 18.05.2010
comment
Обратите внимание, что это плохая идея с точки зрения UX, см. uxmatters.com/mt/archives/2010/03/   -  person svinto    schedule 18.05.2010
comment
@svinto - я не проектировал, я не клиент, на этой странице я фигурирую только как кодер.   -  person Adam Kiss    schedule 18.05.2010
comment
@svinto: Эта статья, похоже, сосредоточилась на плохой реализации этого. Он полностью игнорировал пользовательский опыт с серыми подсказками или другими вспомогательными средствами, чтобы было ясно, что подсказка не является фактическим вводом.   -  person palswim    schedule 02.09.2010

Ответы (6)


arrow_upward
2
arrow_downward

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

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

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

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

  • getElementById() и
  • getElementsByTagName()

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

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

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

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

person Robert Koritnik    schedule 18.05.2010
comment
ну, добавление класса JS (или hasJS) к телу, а затем использование другого класса CSS (что-то вроде .hasJS #thisInput) достаточно ненавязчиво. Однако кажется, что 24 КБ jQuery не так уж много по сравнению с количеством вещей, которые я должен иметь в виду - пользовательская функция addEvent (я ненавижу встроенный JS), пользовательская функция размытия... Кажется, оно того не стоит. - person Adam Kiss; 18.05.2010
comment
Я бы использовал атрибут placeholder вместо empty-value, потому что некоторые браузеры уже поддерживают этот атрибут html5. Вы можете проверить, поддерживает ли это браузер, и если нет, вы можете добавить свой собственный javascript для эмуляции: stackoverflow.com/questions/2856573/ - person jigfox; 18.05.2010
comment
@Jens: Вы можете называть свои атрибуты как угодно, я просто добавил один в качестве примера. Ваше предложение, конечно, лучше. Я исправлю свой ответ. - person Robert Koritnik; 18.05.2010

arrow_upward
3
arrow_downward

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

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

person Andrew Bullock    schedule 18.05.2010
comment
...получив ссылку на ввод каким-то образом; не обязательно getElementById. - person T.J. Crowder; 18.05.2010
comment
так что это означает, что либо я должен использовать встроенный onBlur="myFunc()", либо добавить другой файл JS, чтобы добавить пользовательскую функцию addEvent? - person Adam Kiss; 18.05.2010
comment
@Adam: Вы всегда можете определить блок сценария, который определяет вашу функцию addEvent(). Нет необходимости определять его в отдельном файле, но это упрощает поддержку и повторное использование, поэтому рекомендуется хранить сценарии в отдельных файлах, а не в файлах содержимого. - person Robert Koritnik; 18.05.2010

arrow_upward
2
arrow_downward

Вы можете использовать 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-коде. приведенную выше функцию можно легко изменить, если вы хотите использовать любую другую структуру. Я бы не стал использовать решение без фреймворка, потому что фреймворки отлично справляются с несовместимостью между браузерами.

person jigfox    schedule 18.05.2010
comment
не использовать jQuery было не потому, что он не мог быть ненавязчивым, а скорее потому, что я думал, что это излишество для этой небольшой задачи (в основном это js для ввода логина/пароля и поиска на всей странице). На самом деле, кажется, это не лишнее. - person Adam Kiss; 18.05.2010

arrow_upward
2
arrow_downward

Я бы сделал это так, без 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, чтобы разные страницы имели меньше времени преобразования, а не индивидуально инициализировали элементы управления вводом ;- )

person cryo    schedule 18.05.2010

arrow_upward
1
arrow_downward

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

<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..."/>

person Zsolti    schedule 18.05.2010
comment
Я думаю, что я пойду с jQuery, это просто уродливо. В любом случае, спасибо. - person Adam Kiss; 18.05.2010

arrow_upward
1
arrow_downward

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

Онлайн рабочий пример

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. :)

person Thiago Belem    schedule 18.05.2010
comment
Но здесь используется jQuery, которого Адам хотел бы избежать. Тем не менее, это, конечно, жизнеспособное решение. - person Robert Koritnik; 18.05.2010