Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

222
Visualizações
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?

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

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

about 4 years ago · Juan Pablo Isaza Relatório

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

about 4 years ago · Juan Pablo Isaza Relatório

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

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda