input文字提示

最新推荐文章于 2024-06-07 10:50:28 发布

转载最新推荐文章于 2024-06-07 10:50:28 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bbqwwb/p/6554511.html

本文介绍了一种在HTML5中使用onfocus事件优化输入框提示的方法，通过JavaScript实现更友好的用户体验。不仅覆盖了纯HTML的方式，还提供了jQuery的实现方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单使用onfocus事件检查当前值,如果是默认值,就将value属性置空.如:

<input type="text" value="请输入内容" onfocus="javascript:if(this.value=='请输入内容')this.value='';">

HTML5

<input placeholder="提示语..."></input>

js 较全面

<input type="text" name="tip" />

var str="您的称呼";  
$("input[name='tip']").attr('style','color:gray;');  
$("input[name='tip']").val(str);  
$("input[name='tip']").focus(function(){  
   var v=this.value;  
   if(v == str){  
        $("input[name='tip']").attr('style','color:;');  
        $(this).val("").attr('name','tip');  
    }  
}).blur(function(){  
    var v=this.value;  
    if(v == ""){  
        $("input[name='tip']").attr('style','color:gray;');  
        $(this).val(str).attr('name','tip');       
    }  
});

转载于:https://www.cnblogs.com/bbqwwb/p/6554511.html