ライブでHTML入力値をJavascriptで検出する

Question

HTML入力があります。入力された値をリアルタイムでどのように検出できますか？ ユーザーが「like」と入力すると、div（id = "likediv"）を表示します。それ以外のdiv滞在/隠れている。

Answer 1

あなたは以下のようにdiv要素を非表示/ inputテキストボックスのイベントやショーのためjQueryを使用して聞くことができます。

作業はスニペット：

$(document).ready(function() { 
 
    $('#inputBox').on('input', function() { 
 
    var val = $.trim($(this).val()); 
 
    $('#container div').hide(); 
 
    $('#' + val + 'div').show(); 
 
    }); 
 
    
 
});

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <input id="inputBox" type="text" /> 
 
    <div id="likediv" class="hide" >I like you :-)</div> 
 
    <div id="hatediv" class="hide" >I hate you :-(</div> 
 
</div>

が

Answer 2

$('selectorForTheInputField').on('input', function(){ 
    $('.classSelectorForAllTheThingsItCouldPossiblyBe').hide(); 
    $('#'+ this.value).show(); 
}); 

Answer 3

jqueryを使用して入力の変化を検出し、divを更新します。

$("inputElement").on("input", function(){ 
    //Change the div here 
    var textValueOfInput = $(this).val(); 
    //Use this value to find the div and change it's inner html value... 
});