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>

我想说的是：一个按钮，多个文本框。在 ta_1 中输入文本并单击粗体，应该只加粗该 txtarea 中的文本。附加信息：所有 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这样的所见即所得编辑器

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

elRTE 演示

于 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(). 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 的范围，并且使用起来非常复杂。正如已经建议的那样，我建议使用许多精彩的 WYSIWYG 之一，例如tinyMCE。

于 2012-05-08T20:10:29.500 回答