IE10中文本框的动态对齐不工作

Dynamic alignment for textbox in IE10 is not working

本文关键字：对齐工作动态中文文本 IE10 更新时间：2023-09-26

我试图动态改变文本框的对齐方式，但它不起作用。但是，如果我放弃加载的小部件，工作得很好。

代码;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";   
 }

您可以通过使用::-ms-value伪元素来修复此错误。你需要添加一些填充，这样它就会触发重绘。因为它是伪元素，而不是您要添加填充的实际元素，所以看起来它不会改变输入的实际宽度。它还有一个优点是不能应用于非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;也会更好，而不是直接调整样式对象。

试试下面的代码。希望它能帮助你找到一个好的解决方案。我将宽度设置为零值，然后使用计时器将宽度设置为之前的值，以使其再次渲染。

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/

试试这段代码，它可以在IE中工作:

Javascript:

<>之前

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

之前

MDN CSS属性参考