Modifier le HTML en temps réel avec la balise input

Question

Comment puis-je modifier (changer, ajouter, peu importe) du HTML/texte en temps réel en utilisant la balise input ? Très similaire à l'interface de prévisualisation lors de la création d'une question sur Stack Overflow, mais sans le codage de code. Cela doit juste être simple.

Par exemple,

Tout texte saisi dans la balise input ci-dessus est ajouté à #example en temps réel. Quelque chose impliquant innerHTML et JavaScript peut-être ?

Answer 1

Vous pouvez le faire avec jQuery

$('input').keyup(function(){
    var a = $(this).val();
    $('#example').text(a);
});

Exemple: http://jsfiddle.net/5TnGT/

Answer 2

Il existe de nombreuses autres façons de modifier le contenu que celles décrites dans les réponses précédentes. Écoutez-les toutes et mettez à jour en temps réel. Nécessite la prise en charge de jQuery pour la nouvelle manipulation d'événements .on() pour cet exemple. Vous pouvez également utiliser .bind() ou .live() avec la syntaxe appropriée.

$(document).ready(function() {
    $(document).on('keyup propertychange input paste', 'input', function() {
        $('#example').text($(this).val());
    }); 
});

Le deuxième $(document) peut être rendu plus spécifique en fonction de la structure du reste de votre page.

Voir aussi : http://jsfiddle.net/DccuN/2/

Answer 3

Oui, JavaScript le fera. Jetez un œil à on key up. Ensuite, soit innerHTML comme vous dites ou jQuery facilite les choses avec .append ou .html ou .text

(Zut, trop lent)

Answer 4

Solution JavaScript simple (vous n'aurez pas besoin de bibliothèque sophistiquée si vous ne devenez pas trop compliqué par ailleurs):

Answer 5

Vous pouvez vous connecter à l'événement keyup. Ensuite, définissez le contenu de la div sur celui de l'entrée.

http://jsfiddle.net/wYqgc/

var input = document.getElementsByTagName('input')[0];
var div = document.getElementById('example');
input.onkeyup = function() {
    div.innerHTML = this.value;
};