Помогите преобразовать код JQuery в обычный / обычный JavaScript - PullRequest
Новая
       40

Помогите преобразовать код JQuery в обычный / обычный JavaScript

0 голосов
/ 27 марта 2011

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

<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>

Я нашел этот код здесь: HTML-текст-заполнитель в текстовой форме

Ответы [ 3 ]

2 голосов
/ 27 марта 2011

Вот, пожалуйста: 

(function() {
    var clss= 'auto-hint',
        fields = document.getElementsByClassName(clss),
        field;

    for (var i = 0; i < fields.length; i++) {        
        field = fields[i];
        field.value = field.title;

        field.onfocus = function() {
            if (this.value === this.title) {
                this.value = '';
                this.className = '';
            }
        };

        field.onblur = function() {
            if (this.value === '') {
                this.value = this.title;
                this.className = clss;
            }
        };
    }
})();

Живая демоверсия: http://jsfiddle.net/pj5tG/

Кстати, HTML5 вводит атрибут placeholder. Он выполняет ту же работу. Однако он не работает в IE (но работает в Firefox, Chrome, Safari и Opera). 

<input type="text" placeholder="Name">

Демонстрационная версия: http://jsfiddle.net/pj5tG/1/

0 голосов
/ 27 марта 2011

Делая то же самое, без использования jQuery или подобных библиотек, вам потребуется написать гораздо больше кода. В частности, вам придется проделать гораздо больше работы, чтобы найти элементы DOM, представленные аккуратными селекторами CSS INPUT.auto-hint, TEXTAREA.auto-hint и т. Д.

Чтобы найти элементы, соответствующие селектору, упомянутому выше, вы, вероятно, захотите перебрать все элементы input в документе, которые можно найти с помощью метода getElementsByTagName. Затем вам нужно взглянуть на их className, и, если совпадение найдено, используйте getAttribute, setAttribute и т. Д. изменить элемент. Затем сделайте то же самое для всех элементов textarea.

В этот момент вы должны начать видеть необходимость рефакторинга, извлечения части, которая определяет местонахождение элементов на основе типа и класса. Кроме того, теперь вы должны пересмотреть добавление jQuery к смеси;)

0 голосов
/ 27 марта 2011

Jquery - это удивительно, если вы действительно хотите, вы можете вырезать код из их источника . Но я бы не советовал, jquery - отличный инструмент для разработчиков js, а изучение jquery - это навык, который вам следует знать. Кроме того, я не знаю, под какой лицензией находится jquery, поэтому вы не сможете распространять / использовать только разделы их кода.

...