Как заставить JavaScript находить ценность ввода в фокусе, ясно, если это по умолчанию, и сохранять, если это новые данные?

Question

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

То, что я хочу сделать, это контролировать все элементы ввода поодиночке с помощью некоторого JS / jQuery. Когда пользователь фокусируется на вводе, если значение такое же, как при загрузке страницы, очистите его, если оно было изменено, сохраните его. Затем при размытии, если поле пустое, вернуть значение по умолчанию.

То, что я имею до сих пор, это:

var input = document.getElementsByTagName('input');

$('input, textarea').focus(function() {
    value = $(this).val();

    for (var i=input.length-1; i >= 0; i--) {           
        if(value == input[i].value){
            $(this).attr("value","");   
        }   
    }
});
$('input, textarea').blur(function() {
    if($(this).val()=="") {
        $(this).val(value);
    }
});

Это частично работает, но просто очищает входы, независимо от того, были ли они изменены или нет. Я предполагаю, что храню начальные значения неправильно.

Answer 1

эта строка - плохой парень

if(value == input[i].value){

, так как getElementsByTagName возвращает HTMLCollection, изменения в dom также находятся в вашей входной переменной.Таким образом, значение всегда будет входным [i] .value, поскольку вы получаете значение одного и того же входного элемента, которые, конечно, одинаковы!

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

как это;

var handlers={
    focus: function() {
        var elm=$(this),
            value=elm.val(),
            old=elm.data("placeholder");
        if (typeof old==="undefined"){
            elm.data("placeholder", value);
            old=value;
        }
        if (old==value){
            elm.val("");
        }
    },
    blur:function() {
        var elm=$(this);
        if( elm.val() == "" ) {
            elm.val( elm.data("placeholder") );
        }
    }
};
$('input, textarea').each(function(i, elem){
    $(elem).
        focus(handlers.focus).
        blur(handlers.blur);
});
//not tested, should work!

Answer 2

Вам просто нужно сначала сохранить значение по умолчанию, а затем сослаться на него по размытости и фокусу.

$('input, textarea').each(function() {
        var $this = $(this);
        $this.data('defaultValue', $this.val()); // stores the default value

        $this.focus( function() {
            if ($this.val() == $this.data('defaultValue')) { 
                $this.val(""); 
            }
        });

        $this.blur( function() {
            if ($this.val() == "") { 
                $this.val( $this.data('defaultValue') ); 
            }
        });
});

При втором взгляде я думаю, что нам даже не нужно хранилище данных.

$('input, textarea').each(function() {
        var $this = $(this),
            defaultValue = $this.val(); // stores the default value

        $this.focus( function() {
            if ($this.val() == defaultValue) { 
                $this.val(""); 
            }
        });

        $this.blur( function() {
            if ($this.val() == "") { 
                $this.val(defaultValue); 
            }
        });
});

Answer 3

все это делает: http://jsfiddle.net/uUzY3/4/

$(function() {
    $("input").each( function () {
        $(this).data('initialValue', $(this).val());
    }).bind('focus', function() {
        if ($(this).val() == $(this).data('initialValue'))
            $(this).val("");
    });
});

Answer 4

Итак, проблема 1 - эта коллекция во входных данных является ссылкой, поэтому, когда ваши входные данные обновляются, они также обновляются в коллекции, таким образом, значение всегда кажется значением по умолчанию.

Я бы порекомендовал вместо того, чтобы хранить значения по умолчанию, хранить их как часть элемента. При загрузке вы можете перебирать элементы и добавлять значения в атрибут «по умолчанию». Вы также можете добавить атрибут по умолчанию на стороне сервера, что будет лучше.

Примерно так:

<input type='text' default='myval' value='myval'/>
var jInput = $('input');
if(jInput.val() == jInput.attr('default'))
...

Я уверен, что вы поняли.

Answer 5

Я думаю, что @japrescott верен, но у вас есть и другая проблема - в блоке:

$('input, textarea').blur(function() {
    if($(this).val()=="") {
        $(this).val(value);
    }
});

... переменная value не определена в области.

Answer 6

это то, что я использую в поле поиска:

<input name="q" value="Search here ..." onfocus="if(this.value == 'Search here ...') this.value = '';" onblur="if(this.value == '') this.value = 'Search here ...';">