0

シンプルな TextArea とボタンがあります

ここに画像の説明を入力

ボタンがクリックされたら、wrap(正確に) テキスト領域に赤い div ( border:solid 1px red)を付ける必要があります

ps このラッパー div はposition:relative、将来の絶対配置要素を追加する必要があるためです。

そして、私はこのコードを書きました：

$(".btn").on('click',function (){
 
 $(".myTextArea").wrap($('<span/>', {
                    "class": 'msgAbsWrap',
                    "style": "position:relative;display:inline" /*it's inline by default ,I know*/
                  
                }));
});

しかし、問題はそれが本来のようにラップされないことです:

ここに画像の説明を入力

  • なぜそれが起こっているのですか？
  • 赤い div ラップを (正確に) textarea にするにはどうすればよいですか?

JSBIN

psクロムv 26を使用しています。

編集

（私の悪い）テキストエリアから幅を削除するのを忘れていました（1000回のテスト後）。である必要がありますwidth:100%。今すぐお試しいただけますか？

JSBIN NEW

4

4 に答える 4

1

これらの変更を行って有効にすることができます。

CSS:

.msgAbsWrap {
   border:solid 1px red;
   display:inline-block;
   width:100%;
   position:relative;
}

jQuery:

$(".btn").on('click', function () {
  $(".myTextArea").wrap($('<span/>', {
        "class": 'msgAbsWrap'
  }));
});

更新されたフィドルをチェックアウトする

于 2013-04-04T08:21:43.780 に答える
1

スパンの表示スタイルをdisplay: inline-block;

$(".myTextArea").wrap($('<span/>', {
    "class": 'msgAbsWrap',
    "style": "position:relative; display:inline-block; width: 100%;"
}));

デモ: JSBIN

于 2013-04-04T08:16:18.797 に答える
0

次のようにします。

$(".btn").on('click',function (){

 $(".myTextArea").wrap($('<div></div>', {
    "class": 'msgAbsWrap',
    "style": "position:relative;"
 }));

});

この例を確認してください: jsbin

于 2013-04-04T08:21:12.860 に答える