div模擬文本框textarea

需求：利用highlight.js對文本框中的內容進行高亮顯示

1.highlight.js使用

js中：<script src="js/highlight/highlight.pack.js"></script>

　　<script type="text/javascript">

　　　　hljs.initHighlightingOnLoad();//SQL高亮顯示

　　　　$(document).ready(function() {

　　　　　　$("pre code").each(function(i, block) {

　　　　　　　　hljs.highlightBlock(block);

　　　　　　});

　　　　});

　　</script>

html中：<pre> <code class="lang-javascript"> 內容</code> </pre>

2.highlight.js應用於<textarea>無效，於是用 div模擬文本框textarea

無效示例：<pre>

　　　　　　　<code>

　　　　　　　　　　<textarea id="sql" rows="14" cols="80" name="sqlStatement">

　　　　　　　　　　　　<s:property value="udq.sqlStatement"/>

　　　　　　　　　　</textarea>
                        </code>

　　　　　</pre>

有效div模擬文本框：<div id="sql"  contenteditable placeholder="請輸入文字">

　　　　　　　　　　　<pre>

　　　　　　　　　　　　<code>

　　　　　　　　　　　　　　<s:property value="udq.sqlStatement"/>

　　　　　　　　　　　　</code>

　　　　　　　　　　　</pre>
                       　 　</div>

對於<pre><code>中的內容不隨div的寬度換行問題，應用css樣式：

　　white-space: pre-wrap;
　　word-wrap: break-word;

 

其中：介紹下HTML5裏contenteditable屬性：（參考https://w3c.github.io/editing/contentEditable.html#contenteditable）

它主要的屬性值有：

contenteditable="inherit"
contenteditable=""
contenteditable="events"
contenteditable="caret"
contenteditable="typing"
contenteditable="plaintext-only"
contenteditable="true"
contenteditable="false"

其實在模擬文本框時，經常使用的就是"plaintext-only"、"true"，"plaintext-only"能夠實現可讓編輯區域只能鍵入純文本

其實css中有一個屬性（user-modify）也能實現讓元素內只能輸入純文本，可是因爲目前好像只有webkit內核支持（-webkit-），因此效果沒上面好。