Textcolor, Backgroundcolor - but i need TextBackgroundcolor ?

L

LeftHorn

Hi,

I have a problem...Got a webpage with alot of different input fields - where
a user can maintain a database.

They are allowed to use 'spaces' in their textfields, sometimes they require
to insert a space in the end, sometimes it would be fatal if they do - the
problem is that from a visual point of view the inputfield is like this:

TextColor Black
BackGround White

Nobody are able to see how many spaces there is after a string, unless the
cursor is placed in the field - i need somehow to get a different
TextBackgroundColor (ex. gray) then they would be able to locate it by
sight, instead of having to manually run through all fields.

Can this be done ? by HTML or JS or something ? hope you can help.
 
E

Edwin van der Vaart

LeftHorn said:
Hi,

I have a problem...Got a webpage with alot of different input fields - where
a user can maintain a database.

They are allowed to use 'spaces' in their textfields, sometimes they require
to insert a space in the end, sometimes it would be fatal if they do - the
problem is that from a visual point of view the inputfield is like this:

TextColor Black
BackGround White

Nobody are able to see how many spaces there is after a string, unless the
cursor is placed in the field - i need somehow to get a different
TextBackgroundColor (ex. gray) then they would be able to locate it by
sight, instead of having to manually run through all fields.

Can this be done ? by HTML or JS or something ? hope you can help.
Click to expand...
What you can do is add for the <input> gray as background e.g.
<input name="Name" size="32" style="background: gray;">
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Persoonlijke website
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info and issociate.de to duplicate this post.
 
N

Noozer

It's a bad interface if it depends on spaces at the end of items, but this
may not be under your control.

Off the top of my head what I would do is create three small javascript
functions...

#1 - Called when the data is put into the form. Converts all spaces in all
fields to a normally unused character (like "¬" - if that even goes through
the newsgroups).

#2 - Called when the form is submitted. Converts all these special
characters back to spaces.

#3 - Called by the OnKeyPress event of each field. It would make sure that
any spaces typed by the user are changed to your special character.

http://www.devguru.com/technologies/ecmascript/quickref/evhan_onKeyPress.html
 
B

BootNic

LeftHorn said:
Hi,

I have a problem...Got a webpage with alot of different input
fields - where a user can maintain a database.

They are allowed to use 'spaces' in their textfields, sometimes
they require to insert a space in the end, sometimes it would be
fatal if they do - the problem is that from a visual point of view
the inputfield is like this:

TextColor Black
BackGround White

Nobody are able to see how many spaces there is after a string,
unless the cursor is placed in the field - i need somehow to get a
different TextBackgroundColor (ex. gray) then they would be able to
locate it by sight, instead of having to manually run through all
fields.

Can this be done ? by HTML or JS or something ? hope you can help.
Click to expand...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,'');}
String.prototype.plus=function(){return this.trim()+' ';}
</script>
<title></title>
</head>
<body>
<!--
Form values should be checked on the server.
JavaScript should only be used to assist the user.
-->
<form action="javascript:void(this)">
<!--
Remove white space before and after value
-->
<input onchange="this.value=this.value.trim()"><br>
<!--
Remove white space before and after value then add one space to the end
-->
<input onchange="this.value=this.value.plus()">
</form>
</body>
</html>


--
BootNic Saturday, April 01, 2006 9:51 AM

It is well known that "problem avoidance" is an important part of
problem solving. Instead of solving the problem you go upstream and
alter the system so that the problem does not occur in the first
place.
*Edward de Bono*
 
J

Jonathan N. Little

LeftHorn said:
Hi,

I have a problem...Got a webpage with alot of different input fields - where
a user can maintain a database.

They are allowed to use 'spaces' in their textfields, sometimes they require
to insert a space in the end, sometimes it would be fatal if they do - the
problem is that from a visual point of view the inputfield is like this:

TextColor Black
BackGround White

Nobody are able to see how many spaces there is after a string, unless the
cursor is placed in the field - i need somehow to get a different
TextBackgroundColor (ex. gray) then they would be able to locate it by
sight, instead of having to manually run through all fields.

Can this be done ? by HTML or JS or something ? hope you can help.
Click to expand...

No, that is the job for data validation...you are validating all tainted
user input BEFORE it is utilizes on the server, right?

You can use JavaScript as an optional prescreening validation, but the
bottom line server-side validation must be done on all user input.
 
L

LeftHorn

Hi all, thanks for your input here...

We can for sure agree that one way to solve it was datavalidation when the
data is going to be processed - but this cant be done since different fields
can be used for different purposes, and a SPACE character is a character
that can make sense, even as a trailing space.

Therefore i want to be able to assist the user, so they can spot theese
additional spaces - some of which are totally alright, i cant unfortunately
make a general rule that strips leading and trailing spaces, etc. etc.

So the only way i can see you would be able to help the user, was that you
had the backgroundcolor ex. white the textbackground ex. grey, the textcolor
ex. black - that way it would pop into the eyes. But i guess that cant be
easily done unless im going to convert it into somekind of applet or
application ?
 
N

nice.guy.nige

While the city slept, LeftHorn ([email protected]) feverishly
typed...
Hi,

I have a problem...Got a webpage with alot of different input fields
- where a user can maintain a database.

They are allowed to use 'spaces' in their textfields, sometimes they
require to insert a space in the end, sometimes it would be fatal if
they do
Click to expand...
[spaces at end of fields]

There are a couple of options. One as mentioned is to test the data when it
is received. If you know what fields are *not* allowed to have spaces at the
end you can strip them. Also, you can scan the fields (server side),
checking the last character in each one where there may be a problem. If the
last character is a space, you can warn the user and ask them to edit the
field. And another also, use something like PHP to display the contents of
the field (outside of a text box) wrapped in something like square brackets.
This is something I have done in the past in C programming so I can the full
content of a string, including leading or trailing spaces. Something like
<p>[<?=$field1?>]</p>.

Hope that helps.

Cheers,
Nige
 
M

Mitja Trampus

LeftHorn said:
Hi,

I have a problem...Got a webpage with alot of different input fields - where
a user can maintain a database.

Nobody are able to see how many spaces there is after a string, unless the
cursor is placed in the field - i need somehow to get a different
TextBackgroundColor (ex. gray) then they would be able to locate it by
sight, instead of having to manually run through all fields.

Can this be done ? by HTML or JS or something ? hope you can help.
Click to expand...

Nope, JS can't do that - you don't have enough control over the form elements to apply
style to them letter by letter.

Two alternatives:
1) A rather contrived one, not recommended: substitute each <input> with an iframe.
Requires quite a bit of javascript to make it look and work like an input box, works
slower and so on. I would never use it in a situation like yours. If you must, google for
javascript rich textarea.
2) Instead of coloring the spaces at the end of the input box, warn the user about those
spaces in another way (not by coloring those exact spaces). You could for example make a
red asterisk appear beside the textbox in question. Or you could color the whole textbox
yellow - if you let the users know wwhat that means, it can be just as effective. Still
requires JS, of course, but is much cleaner. Google for javascript events and onkeypress.
 
B

BootNic

LeftHorn said:
Hi all, thanks for your input here...

We can for sure agree that one way to solve it was datavalidation
when the data is going to be processed - but this cant be done
since different fields can be used for different purposes, and a
SPACE character is a character that can make sense, even as a
trailing space.

Therefore i want to be able to assist the user, so they can spot
theese additional spaces - some of which are totally alright, i
cant unfortunately make a general rule that strips leading and
trailing spaces, etc. etc.

So the only way i can see you would be able to help the user, was
that you had the backgroundcolor ex. white the textbackground ex.
grey, the textcolor ex. black - that way it would pop into the
eyes. But i guess that cant be easily done unless im going to
convert it into somekind of applet or application ?
Click to expand...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
function tellerror(msg, url, lnn){
alert('Error message= '+msg+'\nURL= '+url+'\nLine Number= '+lnn)
return true
}
window.onerror=tellerror
</script>
<script type="text/javascript">
var b,v,w,g;
function dink(){
b=w.nextSibling;
if(v!=w.value){
v=w.value;
while(b.tagName.toLowerCase()!='label'){b=b.nextSibling;}
if(!b.childNodes[0]){b.appendChild(document.createTextNode(w.value));}
else{b.childNodes[0].data=w.value;}
}
}
function blink(s){
w=s;
g=window.setInterval('dink(w)',250);
}
</script>
<style type="text/css">
..d{
color:red;
background-color:pink;
margin: 0.3em;
padding: 0.2em;
}
</style>
<title></title>
</head>
<body>
<form action="javascript:void(this)">
<input onfocus=
"blink(this)" onblur=
"window.clearInterval(g)"><label class="d"></label><br>
<input onfocus=
"blink(this)" onblur=
"window.clearInterval(g)"><label class="d"></label><br>
<input onfocus=
"blink(this)" onblur=
"window.clearInterval(g)"><label class="d"></label><br>
</form>
</body>
</html>

--
BootNic Saturday, April 01, 2006 1:31 PM

A well-developed sense of humor is the pole that adds balance to your
step as you walk the tightrope of life
*William Arthur Ward*
 
J

Jonathan N. Little

LeftHorn said:
Hi all, thanks for your input here...

We can for sure agree that one way to solve it was datavalidation when the
data is going to be processed - but this cant be done since different fields
can be used for different purposes, and a SPACE character is a character
that can make sense, even as a trailing space.
Click to expand...

Whoa! When you do data verification you should not apply one rule
universally! E.g., if the field is say 'price' then the validation
should be numeric only [0-9] '.' and '-' maybe. 'name' alpha, street
alpha and numeric for street numbers....
Therefore i want to be able to assist the user, so they can spot theese
additional spaces - some of which are totally alright, i cant unfortunately
make a general rule that strips leading and trailing spaces, etc. etc.
Click to expand...

but your said previously:
"fatal"? If so you better to data validation! Or I see one very very
hackable site.
So the only way i can see you would be able to help the user, was that you
had the backgroundcolor ex. white the textbackground ex. grey, the textcolor
ex. black - that way it would pop into the eyes. But i guess that cant be
easily done unless im going to convert it into somekind of applet or
application ?
Click to expand...

You cannot change the color of portions of form input values. Of course
not to sound like a broken where here a URL can certainly help
especially when the questions are ambiguous.
 
B

BootNic

BootNic said:
[snip]
.d{
color:red;
background-color:pink;
margin: 0.3em;
padding: 0.2em; white-space:pre;
}
Click to expand...
[snip]

--
BootNic Saturday, April 01, 2006 1:38 PM

The only thing that saves us from the bureaucracy is inefficiency. An
efficient bureaucracy is the greatest threat to liberty.
*Eugene McCarthy *
 
B

Blinky the Shark

LeftHorn said:
Hi,

I have a problem...Got a webpage with alot of different input fields -
where a user can maintain a database.

They are allowed to use 'spaces' in their textfields, sometimes they
require to insert a space in the end, sometimes it would be fatal if they
do - the problem is that from a visual point of view the inputfield is
like this:
Click to expand...

Can you give an example of where/why a trailing space would be required,
when it would be fatal in another case?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I need help fixing my website 2
I need some help on a format issue that should be simple for someone here (but not me!) 0
I need help making a zooming function 11
Big problem I need to solve with some unix utils 1
Need help with code on website (noob) 2
Hi, I am a webflow user. I am looking for CSS code that can KEEP ALL ELEMENTS POSITIONED in the SAME spot across all resolutions 0
I need help in understanding these files on my phone, Could someone help me understand these files? Urgent help needed. Please help. 1
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3

Members online

Total: 31 (members: 3, guests: 28)
Robots: 127

Forum statistics

Threads
473,770
Messages
2,569,586
Members
45,097
Latest member
RayE496148

Latest Threads

Top