QQ登录

交流互动,快速开始

登录    注册

仙人球建站
faisco
您现在的位置: >首页 > div+css > 表单元素placeholder实现换行

表单元素placeholder实现换行

编辑: Tony 发布日期: 2017-11-16 来源:网上收集 浏览: tags: placeholder html5 点击收藏文章

客户给的表单里面的textarea里面内容需要换行,发现placeholder元素后面加上Br不行,直接原样输出了,

1.jpg

那怎么实现上面的效果呢,实现效果多种,下面介绍通过js实现,前提先引用jquery插件,其他的插件就不需要了,这是js代码

  <script type='text/javascript'>//<![CDATA[
$(function(){
var placeholder = '[姓名/NOM]\n[电话/TEL]\n[咨询内容/MESSAGE]';
$('textarea').val(placeholder);
$('textarea').focus(function() {
    if ($(this).val() == placeholder) {
        $(this).val('');
    }
});

$('textarea').blur(function() {
    if ($(this).val() == '') {
        $(this).val(placeholder);
    }    
});
});//]]> 

</script>

看看html代码

<h3 style="margin-top:30px">留言 MESSAGE</h3>	
<textarea name="comments" id="comments" cols="" rows="" ></textarea>

这样就可以满足部分需求了,当然要更加完美,兼容ie,火狐等等浏览器就需要你自己去研究啦

ueeshop

免责声明:本站部分资源来自互联网收集,版权归原创者所有,如果侵犯了你的权益,请通知我们,我们会及时删除侵权内容,谢谢合作! 点击这里给我发消息

Copyright©2014-2018 免费网站模板www.freemoban.com Inc.All rights reserved. 备案号: 鄂ICP备17019132号-1