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.
There are just two things you need to do to include the Text Scrambler on your web page:
- Include the HTML markup for the controls and the containers that hold them and the scrambled text
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>
You’ll need to host the script itself somewhere – then adjust the path/to the file to reflect that location