Воссоздание поведения текстового поля вопроса Stackoverflow с использованием jQuery - PullRequest
Новая
       3

Воссоздание поведения текстового поля вопроса Stackoverflow с использованием jQuery

2 голосов
/ 16 декабря 2010

Если вы посмотрите на форму «Задать вопрос» в stackoverflow, поле ввода вопроса будет автоматически выбрано. Когда вы нажимаете на него, все это исчезает, или ToggleVal

Однако, если вы используете плагин toggleVal, он автоматически стирает значение по умолчанию при .select (), даже если select () был сделан программно

Как Stackoverflow предотвращает автоматическое удаление?

1 Ответ

3 голосов
/ 16 декабря 2010

Я посмотрел на источник и нашел это: 

<input id="title" name="title" type="text" maxlength="300" tabindex="100" class="ask-title-field edit-field-overlayed" value="">                        
<span class="edit-field-overlay">what's your programming question? be specific.</span>

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

// set the default value based on the span text
$('input[name=foo]').val($('.foo-overlay').text());

// whenever there is focus or blur
$('input[name=foo]').bind('focus blur',function(){

  // get the default text from the span
  var defaultText = $('.foo-overlay').text();

  // if the input field has default text
  if(this.value == defaultText){
    this.value = '';
  }
  // if the input is blank, set it to the default text
  else if (!this.value.length){
   this.value = defaultText;
  };

});​

Вот демоверсия . Я не говорю, что именно так они и делают. Это предположение, основанное на кратком обзоре.

редактировать

Просто перечитайте свой вопрос и поняли, что вы можете после того, как изначально не удалить значение по умолчанию? Проверьте эту похожую демонстрацию: http://jsbin.com/oyani4/2/

А вот и обновленный код: 

// set the default value based on the span text
$('input[name=foo]').val($('.foo-overlay').text());

// whenever there is focus or blur
$('input[name=foo]').bind('focus blur',function(){

  // if there is no length, reset to default text
  if (!this.value.length){
    this.value = $('.foo-overlay').text();
  };

});

$('input[name=foo]').keydown(function(){

  // if there is length and it's not our default text
  if (this.value.length && this.value == $('.foo-overlay').text()){
    this.value = '';
  };

});
...