首頁(yè) 猿問(wèn) 如何實(shí)現(xiàn)<textarea&...

如何實(shí)現(xiàn)<textarea> placeholder自動(dòng)換行？

JavaScript

繁星coding 2019-04-16 17:06:07

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

查看完整描述

2 回答

慕虎7371278

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊

這是Android瀏覽器中的一個(gè)bug，之前遇到過(guò)，沒(méi)有好的辦法，最后用div標(biāo)簽hack了一下，基本實(shí)現(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();