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

问题描述

|| 我在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>

因此，在文本区域之后，单击文本区域时，我需要添加一个元素，即输入复选框。 我怎么做？ 请帮我。 只是为了让您知道我的网站还加载了jQuery 1.3.2 谢谢     

解决方法

        您可以使用适当命名的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\' />\");
    }
});

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

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

jsfiddle上的示例     ,        尼古拉斯击败了我，但这就是我要建议的... 演示：http：//jsfiddle.net/wdm954/ppnzf/1/

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

    ,        我认为某些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

。