jquery - 文本框中的可移动标签

我正在尝试复制以下行为，即用户将文本输入文本框，然后单击文本框，将输入的文本转换为可移动标签（也非常类似于在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');
        }
    });
});

我该如何实现？

最佳答案

除了在jQuery中添加和删除类之外，您还可以在CSS中为文本框创建一个单独的类，并在将其悬停以使标签消失并在某种意义上被“删除”时更改文本框的不透明度。 。

关于jquery - 文本框中的可移动标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26867041/