La alineación dinámica para el cuadro de texto en IE10 no funciona

I am trying to change the alignment of textbox dynamically and it is not working. But if I give through on load of widget that is working fine.

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

preguntado el 23 de abril de 13 a las 14:04

Trata document.getElementById('text1').style.textAlign = "left"; -

Thanks David, Yes, Before to that line of code I have tried your suggestion too. But I did not work. -

Looks like the view is not being refreshed, as it reports the correct value. They only way I could get it to change is to adjust the width after setting textAlign. Unfortunately if you set it back to the original width it no longer fixes it. Even if you make the width smaller and make up for it with extra padding. -

3 Respuestas

You can fix this bug by using the ::-ms-value pseudo element. You need to add some padding so it triggers a repaint. As it is the pseudo element rather than the actual element you are adding padding too, it looks like it doesn't change the actual width of the input. It also has the advantage of not being applied to non-IE browsers.

CSS:

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

JS:

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

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

Of course, you’d want to store the text1 element in a variable so you don't keep calling getElementById each time. Adding the text-align: left; via CSS would also be better, rather than adjusting the style object directly.

Respondido 24 Abr '13, 01:04

Try this code. Hope it help you with a good solution. I set width to zero value then using timer to set width to the previous value to make it rendering again.

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/

respondido 12 nov., 15:09

Unfortunately I do not have IE browser to test your code. - Excepción

Try this code, it works in IE:

JavaScript:

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

MDN CSS Properties Reference

Respondido 18 Abr '20, 17:04

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.