Question

我有以下html / php / javascript代码：

<?php
$textBox1 = $_POST["textBox1"];
?> 

<html>
<head>
</head>

<body>
<table border="0" cellpadding="2" cellspacing="2" align="center"  bgcolor="#996ad6">

<form method="post" action="<?php echo $PHP_SELF;?>" name="form1">
    <thead>
    <tr><th> Title </th></tr>
    </thead>
    <tbody>
        <tr>
            <td align="left">
                <textarea rows="8" cols="35" name="textBox1" textAlign="left" onKeyUp="changeVal()"><?php
                if (isset($_POST['textBox1'])) {
                    echo $textBox1;
                }
                ?></textarea><br />
            </td>

            <td align="left">
                <textarea rows="8" cols="35" name="textBox2" wrap="physical" align="left"><?php
                    if (isset($_POST['textBox1'])) {
                        echo "hello ".$textBox1;
                    }
                    ?></textarea><br />
            </td>
        </tr>
    </tbody>
    <script type="text/javascript" language="JavaScript">
    s1 = new String(form1.textBox1.value)
    var timer;

    function changeVal() {
        stoper();
        timer = setTimeout ( "document.form1.submit()", 800 ); 
    }

    function stoper() {
        clearTimeout(timer);
    }

    </script>
</form>
</table>

</body>
</html>

这在Chrome和Firefox中运行良好，但在Internet Explorer v8.0中引起了一些恼人的闪烁效果。

有没有办法摆脱闪烁？

Answer 1

当您通过浏览器提交时，页面会重新加载。 Chrome和Firefox在重绘时速度足够快，您没有注意到重新加载，但IE似乎不是。

为避免重新加载闪烁，您可能需要使用javascript httpRequest发布表单值并保持两个textarea同步。

Answer 2

这看起来就是如果用户输入任何内容并停止输入超过8秒，您就会发布表单并重新加载整个页面。

我可以看到这可能导致页面闪烁。事实上，我很惊讶你没有比这更糟糕的问题 - 我还希望它在页面刷新时失去表单字段的焦点和位置，这会给用户带来问题（或者至少，混乱）。

更好的解决方案是使用Ajax方法实现它，它允许您通过Javascript提交和接收数据，而无需刷新页面。您可能想要阅读httpRequest，这是您在Javascript中用来执行此操作的对象。但是，没有必要重新发明轮子，因为有许多JS库可以为您完成所有艰苦的工作。最着名的是JQuery，但还有很多其他的。

顺便说一句（关于主题，但值得一提）：

$PHP_SELF已弃用。您应该使用$_SERVER['PHP_SELF']代替。
HTML规范指出<head>部分不能为空。至少，它必须包含<title>。

Internet Explorer在提交后更新html表单时显示闪烁效果

2 个答案: