Javascript IE9中的文本对齐问题_Javascript_Html_Css

Javascript IE9中的文本对齐问题

javascript html css

Javascript IE9中的文本对齐问题,javascript,html,css,Javascript,Html,Css,我有一个输入字段，里面有一些文本。点击一个按钮，我想改变文本对齐中心，左，右它适用于所有浏览器，但不适用于IE9 <!DOCTYPE html> <html> <head> <title> Test for Text Align</title> <meta charset = "UTF-8" /> <style type="text/css">

我有一个输入字段，里面有一些文本。点击一个按钮，我想改变文本对齐中心，左，右

它适用于所有浏览器，但不适用于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>

如果你还没有得到解决，你可以得到下面的代码工程在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>

这是一个奇怪的错误，至少在IE的一些版本。通过事件处理程序属性更改输入框的样式时，输入框呈现似乎不会更新。在testTextBox的定义之后添加以下内容似乎会有所帮助：

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

在任何浏览器上都不起作用。根据我的观察，当你以html文件的形式打开上述内容时，它在除IE9之外的所有浏览器中都能正常工作，因此当你将脚本打包时，它需要portalWorks的帮助。在IE10上也不起作用。请注意“每个浏览器”之类的表达。相反，请列出您实际测试过的浏览器。使用css+jquery或css+JavaScipt尽管这是一个很好的解决方案，但我只想使用Javascript而不使用jquery。你能帮我这边走吗？

testTextBox.value += '';