jquery - 文本框内的可移除标签

Question

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

我可以像这样在文本框中创建水印 -

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 中为文本框创建一个单独的类，并在将鼠标悬停在文本框上时更改文本框的不透明度以使标签消失并在某种意义上'已删除'。