ダイナミックに作成されたテキストボックスにテキストを書式設定

Question

異なるidを持つテキストエリアを生成するjqueryがあります。今私はそのテキストエリア内のテキストをフォーマットするいくつかのボタンを作成する必要があります。たとえば、ユーザーが特定のテキストエリアをクリックしたときにテキストを入力し、「太字」ボタンをクリックすると、そのテキストエリア内のテキストのみが太字になります。私はJSでこのようなものを作るために管理しましたが、それはあまりにも原始的だった（テキストはテキストボックスのすべてでフォーマットされた）:( ここでは、このためのいくつかのサンプルコードです：

<button id="bold">B</button> 
<textarea id="ta_1">Some test text</textarea> 
<textarea id="ta_2">Some test text</textarea> 

私が言いたい：1 ta_1にテキストを入力して太字をクリックすると、そのテキストボックスのテキストだけが太字で表示されます追加の情報：同じ単語から始まり、末尾に異なる番号が表示されます

、それを把握することはできません：D

Answer 1

は実はこれは本当に悪い習慣であることを確認していますが、このようなことを行うことができます忘れないでください

var activeEl; 

$("textarea").focus(function() { 
    activeEl = $(this); 
}); 

$("#bold").click(function() { 
    $("textarea").css("font-weight", ""); 
    activeEl.css("font-weight","bold"); 
}); 

DEMO

UPDATE-1：なぜこれをやろうとしているのか分かりませんが、WYSIWYGエディタを使用することをお勧めします以下のようなelRTE

UPDATE-2：あなたは、あなたがあなたのエディタがちょうど "大胆" ボタンを持っているしたい場合は、[はい、あなたがそれを行うことができ、elRTEであなたのツールバーをcostomizeでき

$(document).ready(function() { 
    elRTE.prototype.options.panels.web2pyPanel = ['bold']; 
    elRTE.prototype.options.toolbars.web2pyToolbar = ['web2pyPanel']; 
    var opts = { 
     toolbar: 'web2pyToolbar', 
    } 
    var rte = $('#our-element').elrte(opts); 
});​ 

DEMO FOR elRTE

Answer 2

使用document.activeElement

var activeEl; 
$('#bold').mousedown(function() 
{ 
    activeEl = document.activeElement 

}); 
$("#bold").click(function() { 

    //check activeElement 
    if(......){ 
     activeEl .css("font-weight","bold"); 
    } 
}); 

、activeElement正確にテキストエリア

Answer 3

これはユーザー機能のための素晴らしいアイデアだとは思えませんが、それはできます。あなたはどこかで "アクティブなテキストエリア"を記録するだけです。私は.data()を使用することをお勧めします。 jsFiddle

//disable the button until we have a target textarea to avoid confusion 
$('#bold').attr('disabled','disabled'); 

//Record a new 'activeElement' each time user focuses a textarea 
$('textarea').focus(function(e){ 
    $('#bold').data('activeElement',e.target) 
     .removeAttr('disabled');//this first time we will enable the bold button 
}); 

//retrieve the stored 'activeElement' and do something to it 
$('#bold').click(function(){ 
    var activeElement = $('#bold').data('activeElement'); 
    $(activeElement).css('font-weight','bold'); 
}); 

ほとんどの人は、「テキストの書式設定」ボタンは、その選択に取り組むことを期待しています。選択範囲と範囲はjQueryの見解から外れており、操作が非常に複雑です。すでに提案されているように、私はtinyMCEのような多くのすばらしいWYSIWYGの1つを使用することをお勧めします。