0

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

我在 JsFiddle 中写了一个小演示来演示这个问题

IE 10 中有 2 个问题

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

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

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

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

1 回答 1

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

那应该这样做。

于 2013-08-21T21:04:32.660 回答