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-），因此效果没上面好。