Text Scrambler Plugin

Want to see the Text Scrambler in action? You can find that here.

Want to cut to the chase and download a copy of your own so that you can go play? Here you go.

This plug-in is written in plain ol’ vanilla JavaScript and is not dependent on any other libraries (such as jQuery).

There are just two things you need to do to include the Text Scrambler on your web page:

  1. Include the HTML markup for the controls and the containers that hold them and the scrambled text
  2. Include the JavaScript plug-in that does all the heavy lifting

1. HTML Markup

Somewhere within the body of your page, you’ll need to include markup similar to the example below. You can customize the text if you like – and if you delve into the script itself, you’ll see that you can change the names of the controls too. There are also plenty of hooks for CSS, so that you can customize the appearance.

<textarea name=”inputContainer” id=”inputContainer” cols=”30″ rows=”10″ placeholder=”Enter some content here, then press the button below.”></textarea><br><br>

<button id=”actionDoIt”>Do it!</button> <button id=”actionReset”>Reset</button><br><br>

<textarea name=”outputContainer” id=”outputContainer” cols=”30″ rows=”10″ placeholder=”And it wlil apaepr sbarmelcd here.”></textarea>

2. Include the JavaScript plugin

You’ll need to host the script itself somewhere – then adjust the path/to the file to reflect that location

<script src=”path/to/randomizer.js”></script>

3. Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *