首頁猿問如何實現(xiàn)<textarea&...

如何實現(xiàn)<textarea> placeholder自動換行？

JavaScript

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

寫的是移動端的web，定義了一個textarea，在placeholder中添加了一些提示語。由于有些手機屏幕不同，placeholder的內(nèi)容不會自動換行，而是超出了屏幕顯示區(qū)域。之前搜索過一些關于placeholder換行的內(nèi)容，說是加入ward="hard"屬性強制換行（添加過，無效。）手動設標記換行（對于其他屏幕大移動設備不合適了）。請問怎么樣可以讓placeholder的內(nèi)容可以自動換行？（ps:在電腦瀏覽器中和iPhone上會自動換行，但在Android內(nèi)則無法實現(xiàn)。很奇怪的情況）

查看完整描述

2 回答

慕哥6287543

TA貢獻1831條經(jīng)驗獲得超10個贊

這是Android瀏覽器中的一個bug，之前遇到過，沒有好的辦法，最后用div標簽hack了一下，基本實現(xiàn)了需求，供參考。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);//調(diào)用方法$('textarea').placeholder();