問題描述

textarea里面直接方內(nèi)容，用背景的平鋪實(shí)現(xiàn)每行底部的下劃線，由于調(diào)節(jié)了行高，導(dǎo)致光標(biāo)過大（如圖），考慮到底部的下劃線，不能輕易改變行高，請(qǐng)問大神們，該怎么讓光標(biāo)顯示正常？

.textarea{

display: block;width:100%;-webkit-box-flex:1;overflow-y:scroll;font-size:.24rem;border:none;resize: none;background: #fff;outline: none;color: #555555; box-shadow: 1px 1px 0 #d2d2d2;line-height: 50px;margin: 1px auto;padding: 0 20px;background-image: -webkit-linear-gradient(top , transparent, transparent 49px,#d2d2d2 0); background-size: 100% 50px;

}

問題解答

這個(gè)是Chromium一個(gè)已知的bug，在2014年10月report。由于優(yōu)先級(jí)不高，遲遲沒有被修復(fù)。在2017年1月12日狀態(tài)改為fixed：

CARET: Caret height is incorrect from second wrapped line of text when line-height is set

我在最新的Chrome Canary(Version 58.0.2989.0)測(cè)試了一下，這個(gè)問題已經(jīng)被解決。所以預(yù)計(jì)在近期的Chrome新版本中這個(gè)問題將會(huì)被修復(fù)。

當(dāng)然一個(gè)更直接的辦法就是不使用textarea，用別的標(biāo)簽代替。這個(gè)具體就要看你的需求了。一個(gè)可能的辦法是用contenteditable屬性。例如：

<p contenteditable=“”>hello</p>

或者

<p contenteditable=“true”>hello</p>

這個(gè)屬性可以實(shí)現(xiàn)“可編輯”的效果，但是由于不是input，因而沒有.value等方法，而且輸入的內(nèi)容會(huì)轉(zhuǎn)化為html。另外，在某些移動(dòng)端可能需要設(shè)置CSS：

[contenteditable] { user-select: text;}回答2：

這其實(shí)算是chrome的一個(gè)bug，firefox就不會(huì)。

非要這種樣式的話，我暫時(shí)能想到的就是自己模擬一個(gè)textarea，把原有的textarea隱藏，然后自己模擬光標(biāo)。