免费模板网标签tags 更多...
您的位置:首页 > div+css > 表单元素placeholder实现换行

表单元素placeholder实现换行

时间:2017-11-16 来源:网上收集 作者:Tony 阅读次数 tagsplaceholderhtml5

客户给的表单里面的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,火狐等等浏览器就需要你自己去研究啦

猜你喜欢
栏目推荐
模板推荐

Copyright:2014-2018 www.freemoban.com Corporation,All Rights Reserved 免费模板网 版权所有 鄂ICP备17019132号

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

建站咨询QQ