单击时清除值，但如果未进行任何更改，则将其还原

Question

所以我有这个功能：

            $(document).on('click', '.clearvalonclick1', function(event) {                          
                $(this).val('');
            });             

它完成了我需要做的一半。基本上我想要发生的是当用户点击文本框时它清除了值，但如果输入中没有进行任何更改，则当用户点击时该值将被恢复。

Answer 1

尝试

$(document).on('focus', '.clearvalonclick1', function (event) {
    $(this).data('val', this.value).val('');
}).on('blur', '.clearvalonclick1', function (event) {
    var $this = $(this);
    if(this.value == ''){
        $this.val($this.data('val'))
    }
});

演示：Fiddle

Answer 2

对placeholder元素使用input属性：

<input placeholder="sometext" />

Fiddle

不支持IE9-：http://caniuse.com/#feat=input-placeholder

编辑：JavaScript替代方案：

var placeholderText = "placeholder";
$('input').val(placeholderText)
    .on('focus', function () {
        $(this).val('');
    })
    .on('blur', function () {
        var $this = $(this);
        if (!$this.val()) {
            $this.val(placeholderText);
        }
    });

Fiddle