文本框内的可移动标签

Question

我正在尝试复制以下行为，即用户在文本框中输入文本，在单击文本框时，输入的文本将变为可移动标签（也非常类似于在问题中添加标签） SO） -

我可以在文本框中创建一个水印 -

CSS

input.watermark {
    color: #D3D3D3; font-weight: 400;
}

Jquery的

(document).ready(function() {

    var watermark = ''; // watermark value

    $('#myID').val(watermark).addClass('watermark');

    $('#myID').blur(function(){
        if ($(this).val().length == 0){
            $(this).val(watermark).addClass('watermark');
        }
    });

    $('#input_fname').focus(function(){
        if ($(this).val() == watermark){
            $(this).val('').removeClass('watermark');
        }
    });
});

我怎样才能做到这一点？

Answer 1

不是在jQuery中添加和删除类，而是可以在CSS中为文本框创建单独的类，并在文本框悬停时更改文本框的不透明度，使标签消失，从某种意义上说'删除'。