仅在 IE 中编辑后对 textarea 样式的 Javascript 进行更新

Posted 2023-05-07

【中文标题】仅在 IE 中编辑后对 textarea 样式的 Javascript 进行更新

【英文标题】：Javascript update on textarea style only after edit in IE

【发布时间】：2013-08-24 08:53:40

【问题描述】：

我在 IE10 中有一个文本区域，我正在尝试通过一些 jQuery 滑块和按钮来更新其样式。

我写了small demo in JsFiddle来演示这个问题

IE 10 有 2 个问题

字体未按正确方向更新，行高被忽略 需要更改对齐方式的按钮仅在用户开始编辑 textearea 的内容时才起作用，而不是直接编辑。

Firefix 和 Chrome 都不会出现这两个问题

我使用以下 jQuery 命令来更新样式

$("#area").css('font-size', fontSize + "px");
$("#area").css('line-height', lineHeight + "px");

【参考方案1】：

好吧，我不知道为什么 IE 如此抗拒改变，但确实如此。 IE 不喜欢做任何事情，除非它必须这样做。因此，要解决这个问题，您必须通过将其设置为 var 来获取那里的文本，然后将其全部重新输入，以便 IE 看​​到更改然后更新。

所以这是你小提琴中的代码......

$("#sliderFontSize").slider(
    range: "min",
    min: 10,
    max: 100,
    step: 10,
    slide: function (event, ui) 
        var fontSize = ui.value;
        var lineHeight = (fontSize * 1.3);
        $("#area").css('font-size', fontSize + "px");
        $("#area").css('line-height', lineHeight + "px");
    
);

$("#alignLeft").click(function() 
    $("#area").css('text-align','left');
);

$("#alignRight").click(function() 
    $("#area").css('text-align','right');
);

所以你需要做的就是添加...

var currentText = $("#area").text();
$("#area").text(currentText);

到你的点击函数...

$("#alignLeft").click(function() 
    $("#area").css('text-align','left');
    var currentText = $("#area").text();
    $("#area").text(currentText);
);

$("#alignRight").click(function() 
    $("#area").css('text-align','right');
    var currentText = $("#area").text();
    $("#area").text(currentText);
);

应该可以的。