首页猿问如何实现<textarea&...

如何实现<textarea> placeholder自动换行？

JavaScript

繁星点点滴滴 2019-04-08 09:21:42

写的是移动端的web，定义了一个textarea，在placeholder中添加了一些提示语。由于有些手机屏幕不同，placeholder的内容不会自动换行，而是超出了屏幕显示区域。之前搜索过一些关于placeholder换行的内容，说是加入ward="hard"属性强制换行（添加过，无效。）手动设标记换行（对于其他屏幕大移动设备不合适了）。请问怎么样可以让placeholder的内容可以自动换行？（ps:在电脑浏览器中和iPhone上会自动换行，但在Android内则无法实现。很奇怪的情况）

查看完整描述

2 回答

慕哥6287543

TA贡献1831条经验获得超10个赞

这是Android浏览器中的一个bug，之前遇到过，没有好的办法，最后用div标签hack了一下，基本实现了需求，供参考。javascript(function($){vartest=document.createElement('input');varsupport='placeholder'intest&&!/android/gi.test(window.navigator.userAgent);$.fn.placeholder=function(){returnthis.each(function(){if(support)return;var$this=$(this);varholderText=$this.attr('placeholder');varholder=$(''+holderText+'

');

holder.css({position:'absolute',display:'none',zIndex:999,cursor:'text',wordWrap:'break-word',color:'#bbb'});$this.after(holder).removeAttr('placeholder').parent().css('position','relative');$this.bind('focus',function(){holder.hide();}).bind('blur',function(){if($this.val().length)return;varoffset=$this.offset();vartop=(parseInt($this.css('paddingTop'),10)||0)+(parseInt($this.css('borderTop'),10)||0);varleft=(parseInt($this.css('paddingLeft'),10)||0)+(parseInt($this.css('borderLeft'),10)||0);holder.css({top:top,left:left,width:$this.width()}).show();}).trigger('blur');holder.bind('click',function(){$this.focus();});});};})(jQuery);//调用方法$('textarea').placeholder();

反对回复 2019-04-08

2 回答
0 关注
1684 浏览

关注

热搜

最近搜索清空

如何实现<textarea> placeholder自动换行？

如何实现<textarea> placeholder自动换行？

2 回答

添加回答