在IE10中的文本框動態對齊不起作用

我想動態地改變文本框的對齊，它不工作。但是，如果我通過加載的小部件工作正常。在IE10中的文本框動態對齊不起作用

code; HTML

<input type="text" id="text1" style="text-align:center;width:80px" value="abc"> 
<input type='button' id="btn" value="click">

的JavaScript：

document.getElementById('btn').onclick = function(){ 
    console.log(document.getElementById('text1').style.textAlign); 
    document.getElementById('text1').style['text-align'] = "left"; 
}

來源

2013-04-23 Exception

嘗試'的document.getElementById（ '文本1'）style.textAlign = 「左」;' – David 2013-04-23 13:05:48

感謝大衛，是的，在這行代碼之前，我也嘗試了你的建議。但我沒有工作。 – Exception 2013-04-23 13:08:05

看起來像視圖沒有被刷新，因爲它報告了正確的值。他們只能通過設置textAlign來調整寬度。不幸的是，如果您將其設置回原始寬度，則不再修復它。即使你減小寬度並用額外的填充來彌補它。 – 2013-04-23 18:31:19

您可以通過使用::-ms-value僞元素修復這個bug。您需要添加一些填充，以便觸發重繪。由於它是僞元素而不是實際添加填充的元素，因此它看起來不會改變輸入的實際寬度。它還具有不適用於非IE瀏覽器的優點。

CSS：

.update::-ms-value { 
    padding-right: 1px;  
}

JS：

document.getElementById('text1').className += "update";

http://jsfiddle.net/yHnLK/22/

當然是，你要到的text1元素存儲在一個變量，所以你不保持通話的getElementById每一次。通過CSS添加text-align: left;也會更好，而不是直接調整樣式對象。

來源

2013-04-24 00:11:13

試試看看這個代碼。希望它能幫助你一個好的解決方案。我將寬度設置爲零值，然後使用計時器將寬度設置爲先前的值以使其再次呈現。

HTML：

<div> 
<textarea name="text">WANDER LUST</textarea> 
</div> 
<div> 
<button class="btn-text-align" data-rule="textAlign" data-value="left">Left</button> 
<button class="btn-text-align" data-rule="textAlign" data-value="center">Center</button> 
<button class="btn-text-align" data-rule="textAlign" data-value="right">Right</button> 
</div>

的Javascript：

 

(function($) { 
    $('.btn-text-align').on('click', function(){ 
     $obj= $(this); 
     rule= $obj.attr('data-rule'); 
     ruleValue= $obj.attr('data-value'); 
     textElement= $(':input[name="text"]')[0]; 
     textElement.style[rule]= ruleValue; 
     width= textElement.style['width']; 
     textElement.style['width']= '0px'; 
     timerElement = setInterval(function() { 
      textElement.style['width']= width; 
      clearInterval(timerElement); 
     }, 10); 
    }) 
})(jQuery);

http://jsfiddle.net/zLwq140x/

來源

2015-11-12 09:22:40

不幸的是，我沒有IE瀏覽器來測試你的代碼。 – Exception 2015-11-13 04:34:03

在IE10中的文本框動態對齊不起作用

回答

相關問題