輸入框，允許富文本功能

我要找的建議，我應該使用什麼成分滿足我的需求如下所示是：輸入框，允許富文本功能

我想簡單的單行編輯框，允許用戶輸入文本，當此編輯組件具有焦點，所有文本應該以相同的方式格式化（一種字體，一種顏色，...）

但是當輸入組件失去焦點時，我想「處理」它的文本和（如果適用），的某些部分在中顯示不同的格式（比方說灰色而不是標準黑色）。

是否有一些現有的組件可以達到這樣的目標，還是有一些簡單的代碼/解決方案來獲得這樣的行爲？

來源

2013-06-30 Ωmega

我不認爲有類似的東西，但你可以玩：聚焦和CSS –

– claustrofob

@claustrofob：不看其他的選擇，但OP會必須使用JS/jQuery來獲取單行約束 – OzrenTkalcecKrznaric

您無法設計輸入值的子字符串。如果這是必要的，那麼您需要製作一個與輸入框樣式相匹配的自定義元素，這對於在瀏覽器中進行匹配非常具有挑戰性（要稍微說明），並且在處理字符串時，將span元素設置爲包裝相關的子字符串。爲了簡化這一點，您可以使用HTML5 contenteditable屬性。您仍然必須處理可編輯元素中文本的樣式，但瀏覽器將處理輸入交換內容。

更簡單的解決方案是使用:valid和:invalid僞選擇器。您可以將它們與:focus僞選擇器組合在一起，以在編輯過程中提供未驗證的樣式。關閉我的頭頂，像這樣：

input.targetClass:invalid { 
    background-color: #FDD; 
    color: #B66; 
} 
input.targetClass:invalid:focus { 
    background-color:auto; 
    color: #000; 
}

希望它有幫助。

來源

2013-06-30 15:42:55 jxpx777

由於無法格式化輸入元素中的文本，因此需要使用div元素來實現。採取一個可編輯的div如下

<div contenteditable="true"></div>

現在添加一個onblur事件給它，如下面的線程所述。呼籲的onblur的方法格式化

Is it possible to write onFocus/lostFocus handler for a DIV using JS or jQuery?

來源

2013-06-30 16:16:42

輸入框，允許富文本功能

回答

相關問題