我需要创建一个消息模板，如下所示，
你好 Stackoverflow {Text A} 感谢您的支持 {Text B}
在这种情况下，我需要使用拖放字段来Textarea，我进行了初步研发，寻找一些库来实现我的要求，并发现了这个通过拖放插入文本 http://skfox.com/jqExamples/insertAtCaret.html
$(document).ready( function() {
$('#ClickWordList li').click(function() {
$("#txtMessage").insertAtCaret($(this).text());
return false
});
$("#DragWordList li").draggable({helper: 'clone'});
$(".txtDropTarget").droppable({
accept: "#DragWordList li",
drop: function(ev, ui) {
$(this).insertAtCaret(ui.draggable.text());
}
});
});
$.fn.insertAtCaret = function (myValue) {
return this.each(function(){
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
//MOZILLA / NETSCAPE support
else if (this.selectionStart || this.selectionStart == '0') {
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
Html
<body>
<div id="maincontainer">
<div id="navtoplistline"> </div>
<div id="contentwrapper">
<div id="maincolumn">
<div class="text">
<h2>Message #1</h2>
<textarea name="txtMessage" id="txtMessage" class="txtDropTarget ui-droppable" cols="80" rows="15"></textarea>
<h2>Message #2</h2>
<textarea name="txtMessage2" id="txtMessage2" class="txtDropTarget ui-droppable" cols="80" rows="15"></textarea>
</div>
</div>
</div>
<div id="leftcolumn">
<fieldset>
<legend>Click to insert:</legend>
<ul id="ClickWordList">
<li>Hello world!</li>
<li>All your base</li>
<li>Lorem ipsum dolor sit amet...</li>
</ul>
</fieldset>
<fieldset>
<legend>Drag to insert:</legend>
<ul id="DragWordList">
<li class="ui-draggable">Hello world!</li>
<li class="ui-draggable">All your base</li>
<li class="ui-draggable">Lorem ipsum dolor sit amet...</li>
</ul>
</fieldset>
</div>
</div>
</body>
这工作正常，但我只需要单击该字段并将单击的项目添加到Textarea（不需要拖放选项），还需要通过单击十字符号从文本区域中删除添加的文件。我该怎么办，请帮我解决这个问题。上面的例子对于我来说并不清楚实现我的要求。所以请帮我解决这个问题。
Update:正如 Twisty 所说无法实施X在 Textarea 中我可以用什么来代替它？有什么建议吗？
None
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
