1

I want square brackets to automatically appear on either side of a string of text when entered in the text field of an input form. The result needs to coincide with an onkeyup event.

Here's a snippet of code from the .php file:

$generator .= '<div class="plugin_input_wrapper">';
$generator .= 'Enter your text:';
$generator .= '<input class="text-box" type="text" id="plugin_bottom_text" maxlength="25" name="plugin_bottom_text" onkeyup="plugin_text_type();">';
$generator .= '<span class="text">&nbsp Font size:</span><input class="text-box2" type="text" id="plugin_text_font_size" maxlength="2">&nbsp px</div>';

Is this possible to do with inline Javascript?

Jay
  • 11
  • 7
  • 1
    yes, it's possible, but it'd probably confuse users when text they didn't type suddenly shows up int he box. why not do `[]` and then add the `[]` to the entered text afterwards? – Marc B Aug 05 '14 at 17:33
  • Be careful with this, because you may get a *not so nice surprise* from PHP later on, as that POST variable may come out as `[variable]`. This could have adverse effects. – Funk Forty Niner Aug 05 '14 at 17:40

2 Answers2

2

It would be very confusing for users if this is done while the user is typing. One approach to make it less surprising would be to add the brackets once the focus has been lost (on blur). Here is a snippet:

<form>
    <input type="text" onblur="this.value = '[' + this.value + ']'"/>
</form>

And here is in action: http://jsfiddle.net/3ZwRL/1/

EDIT: The PHP would look like this:

$generator .= '<form>'
$generator .= '<input type="text" onblur="this.value = \'[\' + this.value + \']\'"/>'
$generator .= '</form>'
RedSpikeyThing
  • 304
  • 2
  • 3
0

Uses jQuery as a quick hack and very mucky but this is a simple way to do it:

$('.plugin_input_wrapper input').on('keyup', function() {
  var oldVal = $(this).val().replace(/\[/g,'');
  oldVal = oldVal.replace(/\]/g,'');
  var val = '[' + oldVal + ']';

  $(this).val(val);
});

JSBin

Simply gets the current value of the textbox being typed in, trims out the old brackets and adds them in again and injects back into the textbox

Josh Griggs
  • 918
  • 2
  • 10
  • 17
  • As long as the class names defined above are the same then I see no reason why it would make a difference if PHP is involved. This is just a bit of jQuery that you could add to the page in a $(document).ready(function() { // Code }); snippet – Josh Griggs Aug 07 '14 at 13:44
  • The class is also used elsewhere in the code. Can that be written inline and attached to the current onkeyup event? – Jay Aug 07 '14 at 13:48
  • Yes, you could write it inline, everything in between the $('.plugin_input_wrapper input').on('keyup', function() { // Here }); – Josh Griggs Aug 07 '14 at 13:51
  • I tried adding that after: onkeyup="plugin_text_type(); and it didn't work. – Jay Aug 07 '14 at 13:53
  • http://jsbin.com/gaxewatu/22/edit?html,js,output there's the new code. You use the function test() and then add onkeyup="test()" to the input you want to carry this method on. – Josh Griggs Aug 07 '14 at 14:01
  • Where do I put the script tag in the php file? – Jay Aug 07 '14 at 14:30
  • If you're using pure PHP then echo it out after the output you need it attaching to is. E.g. $generator .= ''; Being careful about your quotes etc – Josh Griggs Aug 07 '14 at 15:01
  • I'm getting an error with this line: oldVal = oldVal.replace(/\]/g,'this.value + \']\';'); unexpected '');' (T_CONSTANT_ENCAPSED_STRING) – Jay Aug 07 '14 at 15:47
  • I got this to work like this: Unfortunately when I write to the canvas it leaves a character out on the end. – Jay Aug 07 '14 at 22:50
  • The script writes properly to canvas as an oninput event, except I've lost the ability to backspace, can that be fixed? – Jay Aug 08 '14 at 01:00
  • That'd be the hacky nature of this solution. As it runs it on every keypress it adds the bracket. You could add in some functionality which checks the keycode being pressed, and if it was a backspace, not run the code. – Josh Griggs Aug 08 '14 at 07:31
  • Do you know how to do that? – Jay Aug 10 '14 at 01:21
  • http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed you can see here how to do it. Backspace is code 8 – Josh Griggs Aug 10 '14 at 23:26
  • Sorry can't keep giving you the whole answer, you'll work it out if you do the reading :) – Josh Griggs Aug 14 '14 at 10:53
  • Couldn't figure it out, neither could anybody else: http://stackoverflow.com/questions/25310701/enable-backspace-with-jquery-oninput-event-within-the-text-on-an-input-form/25311462#25311462 – Jay Aug 15 '14 at 02:11