一:方案,使用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>
给文本框添加默认提示
猜你喜欢
转载自schooltop.iteye.com/blog/2310829
今日推荐
周排行