Typname im Formularelement, erstellt Signatur

Question

Ich suche nach einem Weg, so dass, wenn ein Benutzer seinen Namen in ein Eingabefeld eingibt, eine digitale Signatur erstellt wird, oder eine Art von Box, die den geschriebenen Namen zeigt.

Ist so etwas möglich?

Das Formular selbst muss die Signatur nicht senden, es ist nur für die Show auf der Formularseite selbst.

Dank

Answer 1

Sie für Änderungen auf Ihrer Eingabe hören können und auf jeden Trigger, kopieren Sie es Wert an den Ort ist Sie wollen. Das willst du erreichen, oder?

// Listen for input change 
$('#yourInputId').on('input',function(e){ 
    //copy it's content somewhere else 
    $('#placeToPasteValue').text($('#yourInputId').val()); 
}); 

EDIT: Ich weiß nicht, Ihren genauen Fall, aber wenn Sie einige anderen Elemente ein-/ausblenden wollen, basierend auf Eingabewert, können Sie überprüfen, ob bei leerer Eingabe

// Listen for input change 
$('#yourInputId').on('input',function(e){ 
    var currentInputValue = $('#yourInputId').val(); 
    if(currentInputValue === '') { 
     $('#otherElement').hide(); 
    } else { 
     $('#otherElement').show(); 
     //copy it's content somewhere else 
     $('#placeToPasteValue').text(currentInputValue); 
    } 

}); 

Anderer Ansatz könnte Ihre CSS-Klassen hinzufügen/entfernen innerhalb if/else Satzübergänge zu schaffen, oder andere ausgefallene Effekte :)

Answer 2

ich weiß nicht, ob dies ist, was Sie brauchen, aber vielleicht helfen

var button = document.getElementById("submitButton"); 
 
var nameField = document.getElementById("name"); 
 
var sign = document.getElementById("sign"); 
 

 
function createSign(){ 
 
    sign.innerText = nameField.value; 
 
} 
 

 
button.addEventListener("click",createSign,false);

@import url(https://fonts.googleapis.com/css?family=Cedarville+Cursive); 
 

 
div{ 
 
    height:300px; 
 
    width:80%; 
 
    font-family:"Cedarville Cursive"; 
 
    font-size:25pt; 
 
}

<input type="text" id="name"> 
 
<button value="submit" id="submitButton">Submit</button> 
 
<br> 
 
<div> 
 
    <p id="sign"></p> 
 
</div>