给文本框添加默认提示

一：方案，使用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>