在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中的文本框动态对齐不起作用

回答

相关问题