一:方案,使用placeholder,chrome下OK部分浏览器失败。
<textarea rows="12" name="products" placeholder="26386-88-9 200ML 500ML
818-72-4 300g 1kg
120-46-7 100g 500g 1kg "></textarea>
<script>
var placeholder = "26386-88-9 200ML 500ML\n818-72-4 300g 1kg\n120-46-7 100g 500g 1kg"
$("#cas_notice textarea").focus(function(){
$(this).attr('placeholder','');
}).blur(function(){
$(this).attr('placeholder',placeholder);
});
</script>
二:给文本框添加一个注释的背景图来实现。
<script>
$("#cas_notice textarea").blur(function(){
if($.trim($(this).val()).length > 0){
$(this).css('background-image',"none");
}else{
$(this).css('background-image',"block");
$(this).css('background','url(/assets/img/information.png) no-repeat top left');
}
});
$("#cas_notice textarea").keydown(function(event){
$(this).css('background-image',"none");
});
</script>
<stype>
#cas_notice textarea {
vertical-align: top;
background: url(/assets/img/information.png) no-repeat top left;
}
</stype>
另外还可以给文本框加个小问号,弹出样例图片
<div class="ui field" id="cas_notice">
<i class="help circle icon popups prompt_textarea" data-html="<img width='440' height='210' src='/assets/img/prompt.jpg'>"></i>
<textarea rows="12" name="products" ></textarea>
</div>
给文本框添加默认提示
最新推荐文章于 2021-03-02 03:35:16 发布