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

Formatting text in dynamicaly created textboxes

本文关键字：置文本 格式 文本 动态 创建      更新时间：2023-09-26

我有jquery，它可以生成具有不同id的文本区域。现在我需要制作一些按钮来格式化该文本区域内的文本。例如：当用户单击某个文本区域，输入文本并单击"粗体"按钮时，只有该文本区域内的文本将变为粗体（在其他文本区域中将是正常的）。我确实设法用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

实际上这是一个非常糟糕的做法，但你可以这样做，

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

​演示

UPDATE-1：我不知道你为什么要这样做，但我建议你使用像elRTE这样的所见即所得编辑器

更新-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 演示

我不确定这对用户功能来说是一个好主意，但它是可以做到的。您只需要记录"活动文本区域"somwhere。我建议使用.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。

Use document.activeElement 

var activeEl;
$('#bold').mousedown(function()
{
     activeEl = document.activeElement
});
$("#bold").click(function() {
  //check activeElement
  if(......){
      activeEl .css("font-weight","bold");
  }
});

不要忘记检查活动元素确切的文本区域

相关文章：