Как сделать так, чтобы на входе был текст, находящийся в фокусе?

Question

Пожалуйста, проверьте ссылку ниже:

http://jsfiddle.net/cT9kg/4/

Как вы можете видеть его поле поиска с помощью кнопки.

Если у вас возникли проблемы с пониманиемчто я имею в виду ниже, пожалуйста, просто посмотрите на «Заголовок» на странице «Задать вопрос».

На вход включена автофокусировка.

НО

Как это сделать, чтобы текст уже находился на входе при включенной автофокусировке, но как только кто-то вводит данные, текст исчезает.

AND

Когда кто-то ввел текст во ввод, но затем удаляет его, он возвращается к тому, что был в начале: в фокусе с текстом в нем, инструктируя человека, что вводить во ввод.

Спасибо!

Джеймс

Answer 1

Ничего себе.Я попытался покопаться в исходном коде страницы Ask a question.Поговорим о запутанных.

Вот CSS-файл .Хотя кажется, что соответствующие биты, таким образом, таковы, они, по-видимому, делают НЕ намного больше, чем формат (кроме трюка edit-field-overlay.

.form-item {padding:10px 0px 15px 0px;}
.ask-title            {margin-bottom:-15px;margin-top:-10px;}
.ask-title-table      {width:668px;}
.ask-title-field      {width:610px;}
.ask-title-cell-value {padding-left:5px;}
.edit-field-overlay   {display:none;}

HTML (некоторые теги TD удалены):

    <div class="form-item ask-title">
        <table class="ask-title-table">
            <tr>
                <td class="ask-title-cell-value">
                    <input id="title" name="title" type="text" maxlength="300" tabindex="100" class="ask-title-field" value="">                        
                    <span class="edit-field-overlay">what&#39;s your programming question? be specific.</span>
                </td>
            </tr>
        </table>
    </div> 

Но я совершенно НЕ смог выяснить соответствующие биты Javascript. Поскольку для этой формы НЕТ обработчиков onEvent, которые я вижу, единственной ссылкой на это поле (title) будетв функции prepareEditor.

Кто-нибудь хочет попытаться объяснить это относительному новичку ??

Answer 2

Я проверил это как работающее, просто убедитесь, что вы поместили деталь <script> непосредственно перед тегом </body>.

<input type="text" class="input1" autofocus="focus" id="search" value="Type here..." onKeyPress="checkValue()" />

----

<script type="text/javascript">
    var searchEl = document.getElementById('search');
    var defaultValue = searchEl.value;

    function checkValue() {
        if (searchEl.value == defaultValue) {
            searchEl.value = "";
        }          
    }   
</script>

Answer 3

Вы могли бы использовать атрибут HTML placeholder, но в большинстве браузеров, которые не смогут достичь того, что вам нужно: как только ввод будет сфокусирован, текст заполнителя исчезнет.

Для функциональности, схожей с iOS (можно найти и на таких сайтах, как Twitter), вам необходимо использовать JavaScript. Один пример можно увидеть онлайн здесь .

Этот схожий вопрос ( и этот ) имеет несколько полезных альтернатив и примеров кода.

Вы правильно используете autofocus, что хорошо, но имеет нестабильную поддержку браузера. Вы можете добавить запасной вариант JS, например так ( взято отсюда ):

<script>
window.onload = function () {
    if (!("autofocus" in document.createElement("input"))) {
        document.getElementById("s").focus();
    }
}
</script>

Answer 4

Вы можете определить значение по умолчанию.

На фокусе - пустое значение, если значение является значением по умолчанию.

Когда элемент теряет фокус, Вы можете проверить, если он пуст, и если Да - восстановить значение по умолчанию.