ホームページ >毎日のプログラミング >HTMLの知識 >jQuery が入力ボックスの値をリアルタイムで監視および取得する方法

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

藏色散人
藏色散人オリジナル
2018-12-12 16:20:5822045ブラウズ

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 が入力ボックスの値をリアルタイムで監視および取得する方法

on() メソッド 選択された要素とサブ要素 1 つ以上のイベント ハンドラーを追加します。

text() メソッド 選択した要素のテキスト コンテンツを設定または返します。

val() メソッド 選択した要素の value 属性を返すか、設定します。

この記事は、入力ボックスの値を取得するための jQuery リアルタイム監視の方法を紹介するものです。これも、困っている友人の役に立てば幸いです。

以上がjQuery が入力ボックスの値をリアルタイムで監視および取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。