用户单击输入字段，该值消失

Question

我搜索脚本以消失输入字段中的值。 用户单击进入，该值消失，如果用户未在输入字段中输入内容，则应再次显示该文本。

我尝试使用jQuery和focusin（）focusout（）进行尝试，但随后更改了所有输入字段的值。

Answer 1

我敢打赌，您正在寻找HTML5属性placeholder提供的机制，请按照以下方式使用它：

<input type="text" placeholder="This value will disappear" name="somename" value="" />

至于textarea多行占位符，请检查此方法：

https://stackoverflow.com/a/25261886/1477938

Answer 2

您可以为此使用占位符，否则可以将值用作占位符。 只需检查一下

基于占位符的值

jQuery(document).ready(function(){
    jQuery("input[type='text']").each(function(){
        var x = jQuery(this).attr("value");
        jQuery(this).focus(function(){
            if($(this).val()==x)
            {
                $(this).val('');
            }       
        });
        jQuery(this).blur(function(){
            if($(this).val()=="")
            {
                $(this).val(x);
            }
        });
    });
});

使用占位符

<input type="text" placeholder="test">

Answer 3

您可以使用占位符属性。

 $(document).ready(function() { $('#input').focus( function() { if (!$(this).val().length || $(this).val() == $(this).data('placeholder')) { $(this).val(''); } } ); $('#input').blur( function() { if (!$(this).val().length) { $(this).val($(this).data('placeholder')); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" placeholder="Text here" /> <br/> <hr/> <b>ALTERNATIVE (jQuery):</b> <br/> <input type="text" id="input" data-placeholder="Text here" value="Text here" />