只有在IE中編輯後，在textarea風格的Javascript更新

Question

我在IE10中有一個textarea，我試圖通過一些jQuery滑塊和按鈕來更新樣式。

我寫了一個small demo in JsFiddle演示此問題

這裏有2個問題在IE 10

1. 字體不被更新以正確的方向和行高被忽略
2. 的按鈕，需要改變對齊方式，只在用戶開始編輯textearea的內容而不是直接編輯時才起作用。

這兩個問題不發生在Firefix和Chrome

我用下面的jQuery命令來更新樣式

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

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

應該這樣做。