Un campo de entrada donde el usuario escribirá lo que quiere mostrar
<input type="text" class="input-text form-control" placeholder="Input Text"> <div id="paste"></div> //code to be pasted herefunción keyup llamada cada vez que el usuario realiza cambios
$("#input-text").keyup(function(){ $("#paste").append(`<div class="form-control">$(".input-text").value</div>`)})Cuando escribo "<tagname Hello /tagname>" en el campo de entrada, no se muestra, sino que se implementa como un código HTML. ¿Cómo puedo corregir eso?
Creo que tienes un error tipográfico aquí <div id="paste"> //falta una comilla doble
Hay varios problemas con su código, debería ser:
$("#paste").append('<div class="form-control">' + $(this).val() + '</div>')$("#input-text").val() no $("#input-text").value También puede cambiar $("#input-text").val() a $(this).val()<div class="form-control">$("#input-text").value</div>}) también tiene un } que no debería estar allí.Manifestación
$("#input-text").keyup(function() { $("#paste").append('<div class="form-control">' + $("#input-text").val() + '</div>') }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="input-text" class="form-control" placeholder="Input Text"> <div id="paste"></div> //code to be pasted hereDejando a un lado todos los problemas tipográficos, su problema es que está utilizando .append con una cadena html completa.
Esto agregará html.
Si desea que lo que ingresa (por ejemplo, etiquetas html) aparezca como texto, debe usar .text(newtext) . Mientras envuelve la entrada en un div, la forma más fácil es generar el div y luego agregar el texto. También puede codificar el texto cuando lo agrega como html, pero usar .text(txt) lo hace por usted.
var div = $('<div class="form-control">'); div.text($(this).val()) $("#paste").append(div); Puede convertir esto en una sola línea usando .appendTo() , que devuelve el nuevo elemento en lugar de .append() que devuelve el elemento externo, luego .text() .
$("#input-text").keyup(function() { $('<div class="form-control">').appendTo("#paste").text( $(this).val() ); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="input-text" class="form-control" placeholder="Input Text"> <div id="paste"></div> //code to be pasted here