用Javascript或jQuery在textarea後附加輸入

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

假設你只需要在第一次點擊的文本區域創建的複選框，你可以做這樣的事情：

$("#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版本不會喜歡你添加一個字段d ynamically。如果你可以添加一個元素到表單中，可能是你可以完全改變表單，然後使用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。