Как создать автозаполнение ввода на чистом HTML

<label for="wizards">Who's the best wizard?</label>
<input type="text" id="wizards" name="wizards" list="wizards-list">

<datalist id="wizards-list">
	<option>Harry Potter</option>
	<option>Hermione</option>
	<option>Dumbledore</option>
	<option>Merlin</option>
	<option>Gandalf</option>
</datalist>

Элемент datalist работает во всех современных браузерах, вплоть до IE10.

ZUI — ui библиотека коллекции элементов интерфейса

Включает в себя: Alert, Badge, Banner, Button, Dialog, Example, Font, Form, Header, Image, Keyboard, Layout Group, Layout, Navigation, Page Header, Page, Pagination, Select Container, Splitter, Status Bar, Status, Steps, Tab, Table, Tag, Toolbar, Top Bar, Typography.

Пример Steps

ZUI - ui библиотека коллекции элементов интерфейса

https://github.com/zource/zui | Примеры и документация

HTML5 Placeholder Attribute

HTML5 Placeholder Attribute

Ранее я уже писал о плейсхолдерах. Нормальные браузеры поддерживают

<input type='text' name='email' placeholder='Email Address'/>

. Вот костыль на jquery который решает проблему для недобраузеров:

<script>
    // placeholder polyfill
    $(document).ready(function(){
        function add() {
            if($(this).val() == ''){
                $(this).val($(this).attr('placeholder')).addClass('placeholder');
            }
        }

        function remove() {
            if($(this).val() == $(this).attr('placeholder')){
                $(this).val('').removeClass('placeholder');
            }
        }

        // Create a dummy element for feature detection
        if (!('placeholder' in $('<input>')[0])) {

            // Select the elements that have a placeholder attribute
            $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add);

        // Remove the placeholder text before the form is submitted
            $('form').submit(function(){
                $(this).find('input[placeholder], textarea[placeholder]').each(remove);
            });
        }
    });
</script>

А стили на них вешаются так:

::-webkit-input-placeholder { color:#999; }
:-moz-placeholder { color:#999; }
:-ms-input-placeholder { color:#999; }

Плейсхолдеры и ХТМЛ5

Плейсхолдеры и ХТМЛ5

Не так давно написал: Очистка поля input при фокусе на jQuery
Оказывается в ХТМЛ5 есть плейсхолдер и выглядит это приблизительно так:
ХТМЛ

<h1 class="project-name">
    <a href="http://unwrongest.com/projects/defaultvalue">Unwrongest - Jquery Defaultvalue</a>
</h1>

<input id="username" placeholder="Enter a username..." type="text" />
<input id="password" placeholder="Enter a password..." type="password" />
<textarea id="description" placeholder="Describe yourself..."></textarea>

ЦСС

body { background: #0D1114; }
.project-name a { padding: 0; color: #3cf; text-transform: uppercase; font: bold 13px/30px 'Arial', 'sans-serif'; }

input,
textarea{ padding: 10px; width: 300px; font-weight: bold; font-family: Arial, 'sans-serif'; margin-bottom: 10px; font-size: 13px; border: none; clear: both; float: left; }
.empty { color: #999; }

ЯВА

$('#username, #password, #description').defaultValue();

И вот ДЕМО.

  1. 1
  2. 2
Scroll Up