Question

我想创建一个用于在用户在字段中输入内容时显示弹出或状态的功能，我想在不提交表单的情况下执行此操作，我尝试了以下功能但其工作不正常可以让任何人让我知道问题在哪里。 ........？

的Javascript

<script type="text/javascript">
document.getElementById('confirm').addEventListener('change', checkFile, false);
approveletter.addEventListener('change', checkFile, false);

function checkFile(e) {
        if ($('#confirm').val().length > 0) {

            alert("txt");
        }
    }
</script>

HTML

<input type="text" name="text" id="confirm">

Answer 1

修改 - 最新更新

好的，我看到你从Vivek那里得到了你的小提琴，但你也可能对此感兴趣。现在我完全得到了你想要达到的目标，这里有一个简短的描述。最佳做法是从HTML中拆分JavaScript，并尽可能避免将JavaScript放在HTML head和body中。

因此，首先要创建三个文件：Test.js Example.html和Test.css。当然，你还需要jQuery文件，你只需要在头部包含这些文件。在Example.html中输入以下代码：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="Test.css"/>
        <script type="text/javascript" src="jQuery.js"></script>
        <script type="text/javascript" src="Test.js"></script>
    </head>
<body>
    <input type="text" id="test"/><span id="popup"></span>
</body>
</html>

在Test.css中为弹出的span元素添加一些样式（如果你想要固定的高度和宽度，添加阴影等，你也可以根据自己的喜好使用除法元素和样式）：

#popup {

    background-color: red;
    color: white;
    display: none;

}

最后，将以下JavaScript代码放在Test.js：

中

$(document).ready( function() {

    $("#test").keyup( function() {

        if($("#test").val().length>5) {

            $("#popup").fadeIn();
            $("#popup").html("Invalid length. Maximum is 5.");

        }
        else {

            $("#popup").fadeOut();

        }

    });

});

通过将JavaScript，CSS和HTML划分为单独的文件，您可以获得更加整洁的HTML，并将标注的样式和客户端逻辑分开。

旧答案

将代码包裹在$(document).ready()。

中

像这样：

$(document).ready(function() {

    document.getElementById('confirm').addEventListener('change', checkFile, false);
    approveletter.addEventListener('change', checkFile, false);

});

function checkFile(e) {

    if ($('#confirm').val().length > 0) {

        alert("txt");

    }
}

此外，IE8及以下版本中未提供addEventListener。您可以使用onchange事件，如下所示：

$(document).ready(function() {

    document.getElementById("confirm").onchange = checkFile;

});

IE8和之前的版本attachEvent有类似的方法。如果使用attachEvent方法，它将类似于以下内容：

$(document).ready(function() {

    document.getElementById('confirm').attachEvent('change', checkFile);
    approveletter.attachEvent('change', checkFile);

});

你也可以按照Protron评论中的建议使用jQuery.change()：

$(document).ready(function() {

    $("#confirm").change(function() {

        if ($('#confirm').val().length > 0) {

            alert("txt");

        }

    });

});

当然，没有经典的警报弹出窗口，它可以做到这一点。您可以使用display:none创建自己的HTML分区元素，并在必要时显示它。如果您还需要相关说明，请在评论中给我发送一条说明。

Answer 2

使用此功能，您无需点击该网页。

<input type="text" name="text" id="confirm"><br /><br />
<span id="status" ></span>

<script type="text/javascript">
$('#confirm').keyup(function () {
        if ($('#confirm').val().length > 0) {
            $('#status').html("Text entered");
        }
        else
        {
            $('#status').html("Text removed");
        }
    }
)
</script>

Answer 3

只需听取onkeyup和onkeydown事件。我加入了一个可能有用的jsfiddle。

jsfiddle

当用户使用javascript输入时如何显示pop？

的Javascript

HTML

3 个答案: