jQuery が入力ボックスの値をリアルタイムで監視および取得する方法-HTMLの知識-php.cn

jQuery が入力ボックスの値をリアルタイムで監視および取得する方法

藏色散人

リリース： 2021-01-11 11:12:05

オリジナル

22053 人が閲覧しました

jQuery は、入力ボックスの値をリアルタイムで監視して取得します。日常の Web プロジェクト開発では、このような機能効果を実現する必要があることがよくあります。ウェブサイトのユーザーエクスペリエンスを向上させるために、訪問者をガイドするためのリアルタイムのアクションを実行するため。

jQuery が入力ボックスの値をリアルタイムで監視および取得する方法

次に、入力ボックスの値をリアルタイムに取得する jQuery の実装方法を具体的なコード例に基づいて紹介します。

コード例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery实时获取input输入框的值的示例</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(function () {
        $("#myInput").on("input", function () {
            //在输入框中打印输入的值
            $("#result").text($(this).val());
        });
    });
</script>
<p><input type="text" placeholder="请输入想说的话..." id="myInput"></p>
<div id="result"></div>
</body>
</html>

ログイン後にコピー

ここでは、まず、myInput という ID を持つ input タグを見つけて、on() メソッドを通じてそれに関数を割り当てます。この関数メソッドは次のとおりです。最初に入力入力ボックスを取得します。次に、内容が結果の ID を持つ div に直接割り当てられます。

効果は次のとおりです。

jQuery が入力ボックスの値をリアルタイムで監視および取得する方法