建站软件 优化软件 编程软件 网页辅助 站群程序 网站程序 图像处理 资源教程 字体下载 推荐软件


您的位置:首页 > div+css > 表单元素placeholder实现换行

表单元素placeholder实现换行

时间:2017-11-16 10:29:29  来源:免费模板网 作者:风雪 阅读次数 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,火狐等等浏览器就需要你自己去研究啦

本文地址:https://www.freemoban.com/bjrm/2017/1116/2912.html

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

Copyright:www.freemoban.com 免费模板网 All Rights Reserved 网站备案:辽ICP备19014872号-2   辽公网安备 21010602000376号  辽公网安备:42900402000182号

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