Question

我有jquery生成具有不同id的textareas。现在我需要制作一些按钮来格式化textareas中的文本。例如：当用户点击某个文本区域时，输入文本，然后单击“粗体”按钮，只有该文本区域内的文本将变为粗体（在其他情况下将是正常的）。我确实设法使用JS制作这样的东西，但它太原始了（文本在所有文本框中都被格式化）:( 以下是一些示例代码：

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

我想说的是：一个按钮，多个文本框。在ta_1中输入文本并单击粗体，应该只在该txtarea中加粗文本。附加信息：所有id都以相同的单词开头，最后只是不同的数字。

我觉得有一些简单的解决方案，只是无法弄明白：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：我不知道你为什么要这样做，但我建议你使用像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);
});

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是否完全是textarea

Answer 3

我不确定这对于用户功能是个好主意，但是可以做到。你只需要录制“活动textarea”somwhere。我建议使用.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这样的许多精彩所见即所得之一。

在动态创建的文本框中格式化文本

3 个答案: