Question

我正在尝试合并文本字段提示和输入事件。

我正在使用此版本的IE

运行它

enter image description here

问题是，在页面加载时，默认情况下会显示提示。然后当我输入1个字符时，例如a，我希望有一条警告信息1。但没有任何反应。然后，如果我输入另一个字符，它会显示1。如果我然后清除文本，再次在其中输入1个字符，它就可以了。由于某种原因，它无法识别您输入的第一个字符。

第二个问题是，当提示显示时，它应该是灰色和斜体，但是如果你然后刷新页面，提示将显示但它将是黑色和非斜体。这是怎么发生的？

有谁知道为什么会发生这些事情？

我需要使用下面的代码来使用相同的doctype和metatag，并且需要它来使用此版本的IE。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html>
    <head>
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=8" />
        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    </head>
    <body>

        <input type="text" size="30" id="mytextfield"><button id="mybutton">Go</button>

        <script type="text/javascript">
            updateHint = false;

            $(document).ready(function() {
                var hint = "hello world";

                // get the search box element
                var my_element = $("#mytextfield");

                // this part occurs when you focus/blur on the search box, and will change its text and text colour depending on the scenario
                $(my_element).focus(function () {
                    if ($(this).val() == hint) {
                        updateHint = true;
                        $(this).val("").css({ "color": "black", "font-style": "normal" });
                        updateHint = false;
                    }
                });

                $(my_element).blur(function () {
                    if ($(this).val() == "") {
                        updateHint = true;
                        $(this).val(hint).css({ "color": "gray", "font-style": "italic" });
                        updateHint = false;
                    }
                });

                // force the blur to occur on the search box
                $(my_element).blur();


                // initializes the search button so it does the same thing as stop typing in the search box
                $("#mybutton").click(function () {
                    var text = $("#mytextfield").val();

                    if (text != "" && text != hint) {
                        alert(1);
                    } else {
                        alert(2);
                    }
                });

                // this part will make it so that after 1 second after the user stops typing in the search box, it will run the search request
                var Timeout = null;
                $("#mytextfield").bind("propertychange input", function () {
                    if (!updateHint) {
                        if (Timeout !== null) {
                            clearTimeout(Timeout);
                        }
                        Timeout = setTimeout(function () {
                            $("#mybutton").click();
                        }, 1000);
                    }
                });     
            });
        </script>

    </body>
</html>

在IE9中使用textfield的奇怪行为

0 个答案: