1

I'd like to find a way to to click individual lines of a textarea and move them to a different location. I have the movement part down but can't find any info on if it's possible to only do single lines. Thanks for any input.

http://jsbin.com/vinuvopimo/edit?html,js,output

<html>
<body>



<textarea id="input"> Click me.</textarea> 
<textarea id="output"> </textarea>

<script>

document.getElementById("input").onclick = function() {myFunction()};



function eraseText() {
        document.getElementById("input").value = "";

    } 

 function myFunction() {

    var InputVar = document.getElementById("input").value;
    var OutputVar = document.getElementById("output");

        OutputVar.value = InputVar;

//  cleanup     
eraseText();    
}

</script>

</body>
</html>
Pyreal
  • 517
  • 3
  • 8
  • 19
  • 1
    There's no need for the anonymous wrapping function. You can use `onclick = myFunction;` – 4castle Aug 10 '16 at 18:59
  • You want to split the text area contents into an array, manipulate the array then use `join` to put them back together. This might help you: http://stackoverflow.com/questions/21895233/how-in-node-to-split-string-by-newline-n – Jeremy J Starcher Aug 10 '16 at 19:01
  • Are you inserting line breaks (or another delimiter) somewhere? Otherwise it's actually a single line wrapped by the browser. Changing the size of the textarea in the jsbin changes the number of 'lines'. – Quotidian Aug 10 '16 at 19:05
  • I'm feeding an array into this function to split each element with a new line .join(',').replace(/,/g, '\n').split(); – Pyreal Aug 10 '16 at 19:08
  • Found a similar functionality with Jquery for anyone who is interested. http://stackoverflow.com/questions/13574588/on-click-of-text-in-text-area – Pyreal Aug 10 '16 at 21:01

1 Answers1

0

If you want to manipulate individual lines - you have to figure out where exactly user clicked. There is few options:

The simplest - to divide left input into many one line inputs (visually you can manipulate css to give it a look of one component), than you can create the logic to move lines anywhere.

If you want to stay with single textarea, you can get mouse event y coordinate and calculate line number.

http://jsbin.com/xirinocora/1/edit?html,js,output

Oleg Imanilov
  • 2,591
  • 1
  • 13
  • 26