CODEWITHSUNDEEP
jqueryhtmlcss
Kōdo no musō-ka
Kōdo no musō-ka

Reputation: 769

How do i split user inputed text into individual characters?

I want to give the user the ability to drag each individual character they inputed around the screen.

I am not quite sure how to gain access to the individual characters the user inputs.

In my example below i am able to manipulate each character of "placemark". How do i do this for user inputed text?

HTML

<!doctype html>
<html>
  <head>
      <title>My project</title>
      <link rel="stylesheet" type="text/css" href="stylesheet.css">
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
      <script type="text/javascript" src="script.js"></script>
  </head>

  <body>
    <div class="character">P</div>
    <div class="character">l</div>
    <div class="character">a</div>
    <div class="character">c</div>
    <div class="character">e</div>
    <div class="character">m</div>
    <div class="character">a</div>
    <div class="character">r</div>
    <div class="character">k</div>

    <br><br>

    <form action="demo_form">
      Word: <input type="text" name="fname"><br>
    </form>
    </body>
</html>

CSS

.character {
  width: 10px; height: 15px;
  font-size: 50px;
  display: inline;
}

Jquery

$( init );

function init() {
  $('.character').draggable();
}

Upvotes: 2

Views: 1398

Answers (2)

Wesley Smith
Wesley Smith

Reputation: 19571

If I understand you correctly, this would work. Just type something in the box and click the button to test it

Basically, the way we do this is:

  1. Get the users input and spilt it into an array of characters
  2. Join the array in such a way that it wraps each character in an element (span div ... whatever)
  3. Add those elements to the DOM
  4. Call .draggable() on the added elemets

function initDragable($elements) {
  $elements.draggable();
}
initDragable($('.character'));

$(function(){
    $('#make-word').click(function() {
      var $this = $(this);
      var letters = $('#my-word').val().split('');
      letters = '<div class="character">'+letters.join('</div><div class="character">')+'</div>';
      initDragable($('#word-container').html(letters).find('.character'));
    });
});
.character {
  width: 10px;
  height: 15px;
  font-size: 50px;
  display: inline;
  cursor: drag;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<div id="word-container">
  <div class="character">P</div>
  <div class="character">l</div>
  <div class="character">a</div>
  <div class="character">c</div>
  <div class="character">e</div>
  <div class="character">m</div>
  <div class="character">a</div>
  <div class="character">r</div>
  <div class="character">k</div>
</div>
<br>
<br>

<form action="demo_form">
  Word:
  <input type="text" id="my-word" name="fname">
  <br>
  <button type="button" id="make-word">Make word</button>
</form>

Upvotes: 1

divix
divix

Reputation: 1364

You can't really do it, inputs are not giving you a power to treat each character separately (unless you hack using .keypress() trigger via jQuery).

I would recommend using <button> which would create a draggable element: <div class="character"> each time.

OR

The example below shows how to grab last character you typed and converts it into draggable element:

$('input[type="text"]').keypress(function() {
    var lastCharacter = $(this).val().slice(-1);
    $('body').append('<div class="draggable">'+lastCharacter +'</div>');
    //make element draggable
    $('.draggable').draggable();
});

Upvotes: 1

Related Questions