Say I wanted to color in only part of a user's text in an input field (for instance, making a single invalid word turn red). Is this possible to do, considering that there is no innerHTML?
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Javascript to color part of a form input field
- Thread starter XnavxeMiyyep
- Start date
- Sort by reaction score
Nothing easy. You would have to use one of those WYSIWYG style text fields that lets you color and style text, then simply remove controls for it and use JavaScript to add HTML tags to the text. I don't believe I've ever crossed a site that has done this though.
If you elaborate on what you're doing we might be able to offer suitable alternatives such as maybe showing "error" text near the form field.
If you elaborate on what you're doing we might be able to offer suitable alternatives such as maybe showing "error" text near the form field.
I recently created the site Portmanteaur.com, and as of now, if you enter an invalid character (anything non-alpha) the entire input area turns red. I just thought it'd be cool if only the invalid character turned red, but as you say, it's somewhat tricky.
For what it's worth you can take a look at one of the scripts (Masked Input) I've put together for this type of thing. It doesn't do exactly what you're wanting, but may give you some inspiration at the least and you can make use of my code if that helps too.
Note though that the effects I use in my examples aren't directly linked on the page so you'll have to dig through the source to get to them. The JavaScript files you'll want to look at are shakeshake.js and the end of masked_input_ex.js. Also, I haven't thoroughly tested out the script in various browsers, but I think it does pretty well.
Note though that the effects I use in my examples aren't directly linked on the page so you'll have to dig through the source to get to them. The JavaScript files you'll want to look at are shakeshake.js and the end of masked_input_ex.js. Also, I haven't thoroughly tested out the script in various browsers, but I think it does pretty well.
Cool, thanks.
I'll keep at it, I suppose. I have no idea if this is even possible or not.
That's a great real time validation script, and is a common means to control form input on alot of sites. Thanks for posting the link, angelwatt. 
To do exactly what the OP wants, change color of specific characters and not just the entire text or background color, border, etc., is indeed very tricky. Here's my conceptualized shot at it:
One way is to create an empty div right next to the input field with CSS that makes it look exactly the same as your blank input text field, but set display: none. After the appropriate event is triggered (OnKeyUp, OnClick, onBlur as you wish) call a JS function that reads the input field value into a string, validate and add in HTML as you see fit (colorizing characters, etc.). The copy that string to the div's innerHTML, disable the input field temporarily, and position the div exactly where the input field was and change display to inline or whatever you wish so that its visible. Then after an OnClick or whatever event trigger you prefer, call another function which strips the HTML and copies the plain text back into the input field, then re-enable it and change the div display back to none. If you want to get fancy, there are ways to preserve the original cursor position within the input field and re-position the cursor as part of the last step.
Needless to say, it involves alot of extra work, numerous event triggers in some rather complex JS, it's still the same basic masking technique but cosmetically enhanced.
Personally, a ton of work and doing the masking method angelwatt posted is just as user friendly and intuitive if you ask me. But I posted the "concept" to show you a possible means, which would require alot of testing and heavy thought, I'm sure.
Oh yeah, don't ask me for example code - I made all this up, and never tried it before, so if I disuaded you from trying, maybe that's good, too!
-jim
To do exactly what the OP wants, change color of specific characters and not just the entire text or background color, border, etc., is indeed very tricky. Here's my conceptualized shot at it:
One way is to create an empty div right next to the input field with CSS that makes it look exactly the same as your blank input text field, but set display: none. After the appropriate event is triggered (OnKeyUp, OnClick, onBlur as you wish) call a JS function that reads the input field value into a string, validate and add in HTML as you see fit (colorizing characters, etc.). The copy that string to the div's innerHTML, disable the input field temporarily, and position the div exactly where the input field was and change display to inline or whatever you wish so that its visible. Then after an OnClick or whatever event trigger you prefer, call another function which strips the HTML and copies the plain text back into the input field, then re-enable it and change the div display back to none. If you want to get fancy, there are ways to preserve the original cursor position within the input field and re-position the cursor as part of the last step.
Needless to say, it involves alot of extra work, numerous event triggers in some rather complex JS, it's still the same basic masking technique but cosmetically enhanced.
Personally, a ton of work and doing the masking method angelwatt posted is just as user friendly and intuitive if you ask me. But I posted the "concept" to show you a possible means, which would require alot of testing and heavy thought, I'm sure.
Oh yeah, don't ask me for example code - I made all this up, and never tried it before, so if I disuaded you from trying, maybe that's good, too!
-jim
That's a great real time validation script, and is a common means to control form input on alot of sites. Thanks for posting the link, angelwatt.
To do exactly what the OP wants, change color of specific characters and not just the entire text or background color, border, etc., is indeed very tricky. Here's my conceptualized shot at it:
One way is to create an empty div right next to the input field with CSS that makes it look exactly the same as your blank input text field, but set display: none. After the appropriate event is triggered (OnKeyUp, OnClick, onBlur as you wish) call a JS function that reads the input field value into a string, validate and add in HTML as you see fit (colorizing characters, etc.). The copy that string to the div's innerHTML, disable the input field temporarily, and position the div exactly where the input field was and change display to inline or whatever you wish so that its visible. Then after an OnClick or whatever event trigger you prefer, call another function which strips the HTML and copies the plain text back into the input field, then re-enable it and change the div display back to none. If you want to get fancy, there are ways to preserve the original cursor position within the input field and re-position the cursor as part of the last step.
Needless to say, it involves alot of extra work, numerous event triggers in some rather complex JS, it's still the same basic masking technique but cosmetically enhanced.
Personally, a ton of work and doing the masking method angelwatt posted is just as user friendly and intuitive if you ask me. But I posted the "concept" to show you a possible means, which would require alot of testing and heavy thought, I'm sure.
Oh yeah, don't ask me for example code - I made all this up, and never tried it before, so if I disuaded you from trying, maybe that's good, too!
-jim
I was thinking of using that method, but I realized that whenever you had text that went beyond the width of the text input area, it would become absurdly complicated.
My other alternative would be writing an alternative text entry form from scratch, which seems pretty crazy too.
Hmm....
That's a great real time validation script, and is a common means to control form input on alot of sites. Thanks for posting the link, angelwatt.
Thanks, it was probably one of the hardest scripts I've put together because of the cross browser issues and taking the wrong approach a couple times, but it turned out to be one of the most capable that I've found on the net that does this.
I realized that whenever you had text that went beyond the width of the text input area, it would become absurdly complicated.
My other alternative would be writing an alternative text entry form from scratch, which seems pretty crazy too.
Hmm....
My reply was about a high level view of concept, you could spend hours on the details such as the one you raised:
During the step where you create the HTML string which already contains the problematic text highlighted in red or whatever, create a small function that trims x numbers of plain text chars on the left and right sides, so the error portion of the string is centered in that div. Meaning, the user sees only the relevant portion of their input text, with your error stuff included, in the div. Much like MySQL returns "syntax error near [string]".
Anyway, just creating psuedo code for this alone would take a bit of work - then proof of concept would take even longer as you discover the issues and work with browser quirks and test/test/test.
If it comes down to opting for an alternative, just go with what Angelwatt posted, my .02! Customizing that will take less time!
-jim
I've never looked into something like this so it might not be available, but have you looked at JavaScript libraries such as the Dojo Toolkit at all? They have some fantastic stuff done in JavaScript that really does save a lot of time.
Awesome suggestion, Cromulent!!!
I visited the site, found this related demo using their framework:
http://demos.dojotoolkit.org/demos/form/
@OP: View the demo above, type in the letter A or something into the ZIP code field, for example, see what it does. Waaaaaay cool.
If you like it, the framework can be downloaded with documentation links here:
http://www.dojotoolkit.org/
Thank Cromulent, not me! I never heard of it, it's now on my list of tools! So with angelwatt's code and this, you've now got choices, and should be GTG!
-jim
Awesome suggestion, Cromulent!!!
I visited the site, found this related demo using their framework:
http://demos.dojotoolkit.org/demos/form/
@OP: View the demo above, type in the letter A or something into the ZIP code field, for example, see what it does. Waaaaaay cool.
If you like it, the framework can be downloaded with documentation links here:
http://www.dojotoolkit.org/
Thank Cromulent, not me! I never heard of it, it's now on my list of tools! So with angelwatt's code and this, you've now got choices, and should be GTG!
-jim
Ok, I went with a similar style to that with an error message that explains what's going on.
Thanks for the help, everyone.
Ok, I went with a similar style to that with an error message that explains what's going on.
Thanks for the help, everyone.
Looks pretty good. I think it was a good compromise from what you were originally going for.