Question

我在DIV中有一个textarea，我无法修改。

我需要在文本区域后面添加一个元素，一个输入复选框，使用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

假设您只想在第一次点击textarea时创建复选框，您可以这样做：

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

jsfiddle

上的示例

Answer 3

尼克拉斯打败了我，但这就是我要建议的......

演示：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。

使用Javascript或jQuery在textarea后添加输入

4 个答案: