javascript - <textarea> 元素在调用 jQuery().wrapInner 后为空

Question

我有一个文本区域，我想用一个 div 包装内容。

HTML

<textarea class="wp-editor-area" rows="20" autocomplete="off" cols="40" name="wprss_ftp_post_prepend" id="wprsspostprepend">Hello World!</textarea>

jQuery

jQuery(document).ready(function( $ ){
  $('#wprsspostprepend').wrapInner("<div id='random-wrap'></div>");
});

当我运行这段代码时，即使有内容，它也会将 textarea 留空，我不知道哪里出了问题。

Answer 1

textarea 只能包含文字文本。如果您希望在编辑器中允许使用标签，请改用 pre 元素:

jQuery(document).ready(function ($) {
  $('#wprsspostprepend').wrapInner('<div id="random-wrap"/>')
})

.wp-editor-area {
  width: 30em;
  height: 20em;
  border: 1px solid #ccc;
}

#random-wrap {
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<pre class="wp-editor-area" autocomplete="off" name="wprss_ftp_post_prepend" contenteditable="true" id="wprsspostprepend">Hello World!</pre>