0

異なる 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 にテキストを入力して太字をクリックすると、その txt 領域のテキストのみが太字になります。追加情報: すべての ID は同じ単語で始まり、末尾の番号が異なるだけです。

簡単な解決策があると思いますが、それを理解することはできません:D

4

3 に答える 3

3

実際、これは非常に悪い習慣ですが、次のように行うことができます。

var activeEl;

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

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

デモ

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

UPDATE-2 : elRTE でツールバーをカスタマイズできます。エディターに「太字」ボタンだけを持たせたい場合は、そうすることができます。

$(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);
});​

エルテのデモ

于 2012-05-08T20:04:50.343 に答える
0

document.activeElement を使用する

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

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

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

activeElement が正確に textarea であることを確認することを忘れないでください

于 2012-05-08T20:01:13.573 に答える
0

これがユーザー機能の優れたアイデアかどうかはわかりませんが、実行できます。「アクティブなテキストエリア」をどこかに記録するだけです。を使用することをお勧めし.data()ます。jsフィドル

//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 つを使用することをお勧めします。

于 2012-05-08T20:10:29.500 に答える