• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

169
Vistas
I am taking the text written inside a input field to show in a div, but it is working as a code

A input field where the user will write what he wants to display

<input type="text" class="input-text form-control" placeholder="Input Text">
<div id="paste"></div> //code to be pasted here

keyup function called every time user make changes

$("#input-text").keyup(function(){
    $("#paste").append(`<div class="form-control">$(".input-text").value</div>`)})

When I write "<tagname Hello /tagname>" in input field, it does not get displayed, rather it gets implemented as an HTML code. How can I correct that?

almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

I think you have a typo here <div id="paste"> //missing one double quote

almost 3 years ago · Juan Pablo Isaza Denunciar

0

There is multiple problems with your code, it should be :

$("#paste").append('<div class="form-control">' + $(this).val() + '</div>')
  • It should be $("#input-text").val() not $("#input-text").value Also you can change $("#input-text").val() to $(this).val()
  • You need to wrap your html <div class="form-control">$("#input-text").value</div>}) also you have a } that should not be there.

Demo

$("#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 here

almost 3 years ago · Juan Pablo Isaza Denunciar

0

All the typo-issues aside, your issue is that you are using .append with a complete html string.

This will append html.

If you want what you input (eg html tags) to appear as text, then you need to use .text(newtext). As you're wrapping the input in a div, the easiest way is to generate the div, then add the text. You could also encode the text when you add it as html, but using .text(txt) does this for you.

var div = $('<div class="form-control">');
div.text($(this).val())
$("#paste").append(div);

You can make this a single line by using .appendTo(), which returns the new element rather than .append() which returns the outer element, then chain .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

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda