使用 Javascript 或 jQuery 在文本区域后追加输入

Question

我在 DIV 中有一个无法修改的文本区域。

我需要在带有 javascript 的文本区域之后添加一个元素，一个输入复选框。

这是代码：

<div id="msgrapidosinick"><p class="msguser">My Wall</p>
   <form method="post" id="messaggioajaxd" name="frm2">
   <textarea class="areamsgnoava" name="messaggio"></textarea>
   <input type="hidden" value="1" name="invia" id="invia">
   <input type="hidden" value="1" name="riceve" id="riceve">
   <input type="hidden" value="/assyrian" name="pagina" id="pagina">
   <input type="submit" value="Share" class="submsg" name="senda2" style="display: none;">
   </form>
   </div>

所以我需要在 textarea 之后添加一个元素，即输入复选框，当点击 textarea 时。

我该怎么做？

请帮帮我。

只是为了让你知道我的网站也加载了 jQuery 1.3.2

谢谢

Answer 1

您可以使用恰当命名的after() 方法：

$("textarea[name=messaggio]").click(function() {
    $(this).after("<input type='checkbox' name='yourCheckBoxName' />");
});

如果您想避免创建已存在的复选框，您可以执行以下操作：

$("textarea[name=messaggio]").click(function() {
    var $this = $(this);
    if (!$this.next(":checkbox").length) {
        $this.after("<input type='checkbox' name='yourCheckBoxName' />");
    }
});

Answer 2

假设您只希望在第一次单击文本区域时创建复选框，您可以执行以下操作：

 $("#messaggioajaxd textarea").click(function(){
        if ($('#createdCheckbox').length==0){
        $('<input />').attr('type','checkbox').attr('id','createdCheckbox').insertAfter($(this));
        }
    }); 

jsfiddle 上的示例

Answer 3

Niklas 打败了我，但这是我要建议的...

演示：http://jsfiddle.net/wdm954/ppnzf/1/

$('textarea.areamsgnoava').click(function() {
    if ($('input.new').length == 0) {
       $(this).after('<input type="checkbox" class="new" />');
    }
});

Answer 4

我认为某些 IE 版本不会喜欢您动态添加字段。如果您可以向表单添加一个元素，那么您可以完全更改表单，并使用div.innerHTML 或使用 DOM 将其作为新表单注入。

并将原始 HTML 中的复选框添加为隐藏，如果单击 textarea，则显示它。

例如：

<div id="msgrapidosinick"><p class="msguser">My Wall</p>
  <form method="post" id="messaggioajaxd" name="frm2">
    <textarea class="areamsgnoava" name="messaggio"></textarea>
    <input type="checkbox" name="checkBox" id="checkBox" style="display:none">
    <input type="hidden" value="1" name="invia" id="invia">
    <input type="hidden" value="1" name="riceve" id="riceve">
    <input type="hidden" value="/assyrian" name="pagina" id="pagina">
    <input type="submit" value="Share" class="submsg" name="senda2" style="display: none;">
  </form>
</div>

那么如果你有textarea DOM节点的引用：

textarea.onfocus = function(ev){
  var ta = ev.target || ev.srcElement;
  ta.form.checkBox.removeAttribute('style');
}

或者使用 jQuery 和 focus。