Question

我有一个输入字段，里面有一些文字。单击按钮我想将文本对齐更改为居中，左右。

它适用于所有浏览器，但不适用于IE9。

<!DOCTYPE html>
<html>
    <head>
        <title> Test for Text Align</title>
        <meta charset = "UTF-8" />
        <style type="text/css">
        #testBox{
            text-align: left;
        }
        </style>
    </head>
    <div>
        <input type="text" id ="testBox" name="testBox" value="testBox" maxlength="32" />
    </div>
    <div>
        <input type="button" onClick="testFunction('centeralign')" name="centeralign" id="centeralign" value="centeralign"/>
        <input type="button" onClick="testFunction('leftalign')" name="leftalign" id="leftalign" value="leftalign"/>
        <input type="button" onClick="testFunction('rightalign')" name="rightalign" id="rightalign" value="rightalign"/>
    </div>
    <script type="text/javascript">
    function testFunction(el){
        var testTextBox  =  document.getElementById("testBox");
        if(el == "centeralign"){
            testTextBox.style.textAlign = "center";
        }else if (el == "leftalign") {
            testTextBox.style.textAlign = "left";
        }else if (el == "rightalign") {
            testTextBox.style.textAlign = "right";
        }
    }
    </script>
</html>

Answer 1

如果你仍然没有解决它，你可以得到以下代码在ie9测试js代码作为你的愿望..

    <!DOCTYPE html>
<html>
    <head>
        <title> Test for Text Align</title>
        <meta charset = "UTF-8" />
        <style type="text/css">
        #testBox{
            text-align: left;
        }
        </style>
    </head>
<body>
    <div>
        <input type="text" id ="testBox" name="testBox" value="testBox" maxlength="32" />
    </div>
    <div>
        <input type="button" onClick="testFunction('centeralign')" name="centeralign" id="centeralign" value="centeralign"/>
        <input type="button" onClick="testFunction('leftalign')" name="leftalign" id="leftalign" value="leftalign"/>
        <input type="button" onClick="testFunction('rightalign')" name="rightalign" id="rightalign" value="rightalign"/>
    </div>
    <script type="text/javascript">
    function testFunction(el){
        var testTextBox  =  document.getElementById("testBox");
        if(el == "centeralign"){
            testTextBox.style.textAlign = "center";
        }else if (el == "leftalign") {
            testTextBox.style.textAlign = "left";
        }else if (el == "rightalign") {
            testTextBox.style.textAlign = "right";
        }
    }
    </script>
</body>
</html>

Answer 2

这是IE中的一个奇怪的错误（至少它的一些版本）。当通过事件处理程序属性更改其样式时，似乎不更新输入框呈现。在testTextBox：

的定义之后，似乎有助于添加以下内容

testTextBox.value += '';

这不会修改该值，因为它会附加一个空字符串，但它似乎足以唤醒IE，以便它使用更改的样式呈现输入框。

IE9中的文本对齐问题

2 个答案: