Jquery how to put in span everything the user types in text area

Question

Jquery how to put in span everything the user types in text area

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (-1 votes)

2

The problem that I face is that I could achieve what I need but showing it in the console, but my goal is that as it appears in the console, each word is assigned a span, there is some code in jquery that makes it possible , thank you very much in advance.

This is the challenge I want to achieve ... link ... it's about pasting a text and then when I click on a word this gives me several options between it translate it, I want to do something similar to what the video shows, I do not know if it is possible to do it with Jquery or I need another programming language, I am stuck in that part, Thank you.

$("#span").click(function() {
  alert("es posible meter cada palabra en <span>?");
  var textArea = $('#words');
  var arrayOfWords = textArea.val().split(" ");
  $.each(arrayOfWords, function(i, word){
    console.log(word) // es en esta parte donde no se que codigo usar para meter cada palabra en <span> despues de darle click 
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" name="" value="meter cada palabra que pegue en el Textarea en <span>" id="span"> <br><br>

<textarea id="words"   autocomplete="off" spellcheck="false" autocapitalize="off" autocorrect="off" ></textarea>

javascript jquery

asked by PrincessKawaii 07.11.2017 в 17:56

source

3 answers

use of vectors [closed] DataFrame.set_index has no effect

score 1 · Answer 1

window.addEventListener("DOMContentLoaded", ()=>{
const span = document.getElementById("meteme"),
      textarea = document.getElementById("meto"),
      pattern = /\s/gi;
      var words = [], lastIndex = 0;
      
      textarea.addEventListener("keyup", e =>{
      span.innerHTML = textarea.value;
      if(pattern.test(textarea.value)){ words.push(textarea.value.substr(0,textarea.value.length-1));
      textarea.value = "";
      words.forEach( e => {console.log('El significado de ${e} es: ....')});
      }
      });
});

<span style="display:block" id="meteme"></span>

<textarea style="margin-top: 20%" cols="40" rows="10" id="meto"></textarea>

score 0 · Answer 2

You can use the keyup event as follows:

Jquery :

$(document).on('keyup', 'textarea', function(){ 
    var words = $(this).val();

    $('span').text(words);
});

Here is the example

Note : for this code, you need to include Jquery

Greetings !!

score -1 · Answer 3

In this way you assign the text of "Textarea" to "#span" or any other element, only referring to the id

$("#span").click(function() {
  alert("es posible meter cada palabra en <span>?");
  var textArea = $('#words');
  var arrayOfWords = textArea.val().split(" ");
  $.each(arrayOfWords, function(i, word){
    console.log(word) // es en esta parte donde no se que codigo usar para meter cada palabra en <span> despues de darle click 
  $("#span").val(textArea.val()); // Línea adicional
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" name="" value="meter cada palabra que pegue en el Textarea en <span>" id="span"> <br><br>

<textarea id="words"   autocomplete="off" spellcheck="false" autocapitalize="off" autocorrect="off" ></textarea>