HTML заполнитель текста в виде текстовой области - PullRequest
Новая
       25

HTML заполнитель текста в виде текстовой области

5 голосов
/ 16 февраля 2011

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

Я ограничил количество символов описания до 500 символов, поскольку не хочу читать тонну, и выяснил, как сделать так, чтобы текст появлялся в текстовой области до того, как пользователь введет то, что он хочет.

В настоящее время пользователь должен удалить «Описание вашей идеи» самостоятельно, но я хочу добавить класс заполнителя, где он удаляет то, что я написал в текстовой области, когда они щелкают текстовую область

Я просмотрел несколько сайтов и не мог понять, как его использовать, я поместил его в свой код, но обычно класс просто отображался как текст внутри моей текстовой области.

Любая помощь по использованию этого класса была бы велика, спасибо

Вот что я написал

внутри головы теги 

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

внутри тела теги 

<form name="form1" method="post" action="ideas.php"> 
Your Name: &nbsp;<input type="text" name="name"><br>
Your Email: &nbsp;<input type="text" name="email"<br>
<textarea name="desc" cols=50 rows=10 onKeyDown="limitText(this.form.desc,this.form.countdown,500);" 
onKeyUp="limitText(this.form.desc,this.form.countdown,500);">Description of your idea</textarea><br>
<font size="1">(Maximum characters: 500)<br>
You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font>
<br>
<input type="submit" name="Submit" value="Submit!"> </form>

Ответы [ 2 ]

27 голосов
/ 17 февраля 2011

В HTML5 есть функция под названием «заполнители», которая производит именно эту функцию без необходимости какого-либо кодирования вообще.

Все, что вам нужно сделать, это добавить атрибут placeholder в поле формы, например: 

<input type='text' name='name' placeholder='Enter your name'>

К сожалению, конечно, в настоящее время его поддерживают только несколько браузеров, но попробуйте в Safari или Chrome увидеть его в действии. Хорошей новостью является то, что она будет добавлена ​​практически во все браузеры в ближайшем будущем.

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

Хороший способ справиться с этим - использовать атрибут placeholder и использовать решение Javascript только в том случае, если браузер не поддерживает эту функцию. Решение Javascript может взять текст из атрибута placeholder, поэтому его нужно указывать только в одном месте.

См. Эту страницу, чтобы узнать, поддерживается ли функция placeholder: http://diveintohtml5.ep.io/detect.html

(или, как сказано на этой странице, просто используйте Modernizr )

Резервный код Javascript довольно прост в реализации. Как именно вы это сделаете, будет зависеть от того, хотите вы использовать JQuery или нет, но вот ссылки на несколько примеров:

И, конечно, Google даст вам больше информации, если вы будете искать html5 placeholder fallback или что-то подобное.

Надеюсь, это поможет.

7 голосов
/ 16 февраля 2011

Проверьте http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html Я думаю, что это то, что вы ищете.

Вот простая страница с полем для электронной почты, которое я быстро собрал (в основном из учебника). 

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //  Focus auto-focus fields
        $('.auto-focus:first').focus();

        //  Initialize auto-hint fields
        $('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
            if($(this).val() == $(this).attr('title')){
                $(this).val('');
                $(this).removeClass('auto-hint');
            }
        });

        $('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
            if($(this).val() == '' && $(this).attr('title') != ''){
                $(this).val($(this).attr('title'));
                $(this).addClass('auto-hint');
            }
        });

        $('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
            if($(this).attr('title') == ''){ return; }
            if($(this).val() == ''){ $(this).val($(this).attr('title')); }
            else { $(this).removeClass('auto-hint'); }
        });
    });
</script>
</head>
<body>
<form>
Email: <input type="text" name="email" id="email" title="i.e. me@example.com" class="auto-hint" />
</form>
</body>
</html>

Текст заголовка помещается в поле, если оно пустое, и удаляется, когда пользователь начинает печатать.

...