Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Time to throw my $0.02 in. </p> <p>This is an answer to the question, as I understood it, that works, it's quick and dirty, so feel free to make suggestions. This code is untested, but I did create a working fiddle here: <a href="http://jsfiddle.net/66RXc/" rel="nofollow">http://jsfiddle.net/66RXc/</a></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Testing&lt;/title&gt; &lt;script type="text/javascript"&gt; &lt;!-- function call(val) { document.getElementById('result').value += val.charAt(val.length - 1); document.getElementById('result').value = document.getElementById('result').value.substr(0, val.length); document.getElementById('test').value = document.getElementById('test').value.replace(/[^\^]/g, ' '); }​ --&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;textarea name="textarea" cols="20" rows="5" id="test" onKeyUp="call(this.value);"&gt;&lt;/textarea&gt; &lt;textarea style="display:block" cols="20" rows="5" id="result" disabled&gt; &lt;/textarea&gt;​ &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The way I approached it was every time a character is typed in textarea "test", copy it over to a hidden text box, and replace all the characters in "test" except ^ with spaces. The characters are hidden, and the carat is still there. The full text is still in the other box. You could use display:hidden instead of display:block to hide it. </p> <p>This isn't exactly the best implementation in the world, just something I did quickly. You have to type kind of slow (~15-20 WPM) for it to work. </p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload