Update div auf der Eingabe der Basis auf Datenattribut

Question

Ich möchte Textvorschau haben, um das Beispiellayout einer Seite anzuzeigen. Wenn ich also den Titel anlege, wird der Text in der Titeldivib-Basis auf dem data-target Wert angezeigt. Bedeutung Ich habe mehrere Eingaben zu tun.

Also schreibe ich Code, aber es ist irgendwie nicht den Vorschautext zum gewünschten div. Ich bin nicht gut in Japanisch oder Englisch, tut mir leid.

HTML

<div id="h1"></div> 
<div id="h2"></div> 
<hr /> 

<input type="text" onkeypress="livePreview(this.value);" data-target="h1" placeholder="h1 value" /> 
<input type="text" onkeypress="livePreview(this.value);" data-target="h2" placeholder="h2 value" /> 

Javascript

 var timerHandle = false; // global! 
     function livePreview(what) { 
      $('div').data('target').html(what);//use target to display in div 
      if (timerHandle) clearTimeout(timerHandle); 
      timerHandle = setTimeout(sendItOff, 500); // delay is in milliseconds 
     } 

     function sendItOff() { 
      what = document.getElementsByClassName("live").value; 
      console.log("Sending " + what); 
     } 

Dies ist die Geige: https://jsfiddle.net/ue2aysdq/1/

Answer 1

sollte die Veranstaltung keyup sein

https://jsfiddle.net/tejashsoni111/ue2aysdq/7/

jQuery('input[type="text"]').on('keyup', function(){ 
    var id = "#"+jQuery(this).data('target'); 
    jQuery(id).html(jQuery(this).val()); 
}) 

Answer 2

Verwenden keyup Ereignis binden es in das Eingabefeld, wenn Sie eine Live-Vorschau möchten:

 $('input[data-target]').keyup(function() { 
      var el = '#' + $(this).attr('data-target');//build the id for the preview element 
      $(el).text($(this).val());//change the elements text with the value of the input field 
     }); 

Demo: https://jsfiddle.net/ue2aysdq/11/

Answer 3

ich einfach mit Ziel in Funktion Fall in Kraft treten.

var timerHandle = false; // global! 
 
\t function livePreview(what,target) { 
 
    $('#'+target).html(what); 
 
\t \t } 
 

 
\t \t \t function sendItOff() { 
 
\t \t \t what = document.getElementsByClassName("live").value; 
 
\t \t \t console.log("Sending " + what); 
 
\t \t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="h1"></div> 
 
    <div id="h2"></div> 
 
    <hr /> 
 
    
 
    <input type="text" onkeypress="livePreview(this.value,'h1');"placeholder="h1 value" /> 
 
    <input type="text" onkeypress="livePreview(this.value,'h2');" placeholder="h2 value" />

Answer 4

Sie JQuery, dies zu tun verwenden: https://jsfiddle.net/ue2aysdq/9/

<div id="h1"></div> 
<div id="h2"></div> 
<hr /> 

<input type="text" data-target="h1" placeholder="h1 value" id="h1in"/> 
<input type="text" data-target="h2" placeholder="h2 value" id="h2in"/> 


$('#h1in').keyup(function() { 
    var impt = $(this).val(); 
    $("#h1").html(impt); 
}); 

$('#h2in').keyup(function() { 
    var impt = $(this).val(); 
    $("#h2").html(impt); 
});