替換輸入字段的顯示

我正在嘗試編寫一個輕量級的html/javascript小部件，它可讓我在輸入每個字符時對其進行着色。我在想，實現它的方法應該是有一個對事件有反應的輸入字段，但是其實際顯示由一個html div覆蓋，該html div將讀取輸入字段的值，將其突出顯示並寫出。這是推薦的做事方式嗎？有沒有一個圖書館已經實現了這一點，並照顧我可能沒有想到的任何細節？替換輸入字段的顯示

編輯：尋求新的方式來實現cronoklee的CONTENTEDITABLE想法提出了這個漂亮的文章：http://perplexed.co.uk/993_contenteditable_cross_browser_wysiwyg.htm

來源

2011-04-11 Martin DeMello

這可能會感興趣： http://www.w3.org/TR/html5/editing.html#contenteditable

我可能會成立一個CONTENTEDITABLE DIV，並調用JavaScript按鈕上的功能將最後輸入的字符包裹在樣式化的span標籤中。如果您需要提交輸入的數據，請設置輸入類型='隱藏'並在按鍵時輸入。無需重疊一個！

編輯：我剛剛意識到（幾個月後！），你可以簡單地使用div.textContent來獲取輸入的內容。這將只顯示沒有樣式的文本，所以不需要額外的輸入字段來捕捉字符。

來源

2011-04-11 18:48:04 cronoklee

這聽起來有點太強大了 - 我不想讓用戶在我的文本框中輸入任意的html，我希望我自己的回調函數在他進入或修改它時突出顯示他的文本。 – 2011-04-11 18:50:59

那麼使用我上面描述的系統，你可以將輸入過濾爲只有你指定的字符。您甚至可以完全禁用編輯，並在用戶輸入時使用javascript填充div。這意味着他們不會看到一個可用性問題的插入符號。 – cronoklee 2011-04-11 18:54:59

HM - 好吧，我明白你要去哪裏了。好主意，我可以免費獲得div的任意樣式。 – 2011-04-11 19:34:36

這聽起來很麻煩，沒有太多的收穫。就我個人而言，我喜歡用stackoverflow來做它，使用textarea和onblur，他們將突出顯示應用於預覽。

來源

2011-04-11 18:51:23 daniellmb

這是一個在線文字遊戲;例如，如果用戶已經開始輸入無效的文本（文本應該變成紅色字母）以及其他全局條件，則需要實時反饋（因此，您可以輸入某些內容並且字符串的不同部分會顏色本身） – 2011-04-11 19:31:07

如果你想要一個語法高亮/編輯器，真的很好。有一個演示：http://ajaxorg.github.com/ace/build/editor.html

來源

2011-04-11 18:54:03 penguinrob

再次，太重 - 我想要的是通過一些回調彩色文本，而不是一個完整的編輯器，甚至是一個詞法分析器。 – 2011-04-11 19:31:51

替換輸入字段的顯示

回答

相關問題