PDA

View Full Version : Form Focus Auto Delete Text

tarq
07-01-2003, 10:26 AM
I've put a script on my site which makes the focus go automatically to the first form field when the page is loaded this way a user can just type without haven't to click to select the text box but I already have a value in the text box and I was wondering if there was anyway for that to disapear when someone starts typing in the box or clicks on the box so they don't have to delete it? Thanks for any repies.
designhazard
07-01-2003, 01:39 PM
could you show me the code?
tarq
07-01-2003, 02:02 PM
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Tom Khoury (twaks@yahoo.com) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function placeFocus() {
if (document.forms.length > 0) {
var field = document.forms[0];
for (i = 0; i < field.length; i++) {
if ((field.elements[i].type == "text") || (field.elements[i].type == "textarea") || (field.elements[i].type.toString().charAt(0) == "s")) {
document.forms[0].elements[i].focus();
break;
}
}
}
}
// End -->
</script>



<BODY OnLoad="placeFocus()">


Note: I've removed all my code that surrounded this and given you the relevant bits! Hope this helps you to help me! Thanks for your reply :)
designhazard
07-01-2003, 02:12 PM
that's not complete. what about the <form> part?
tarq
07-01-2003, 02:59 PM
Sorry I wasn't aware it was necessary:

<!- Form Processing, by Cut and Paste Scripts. Hosted CGI, with NO adverts and FREE. http://www.cutandpastescripts.com -!><form method=POST action="http://www.cutandpastescripts.com/cgi-bin/formprocessing/forms.pl"><input type=hidden name="activenumber" value="0123456789"><input type="hidden" name="username" value="username"><!-- INSERT YOUR NORMAL FORM FIELDS HERE --><!- Cut and Paste Scripts 2000 -!><input type="text" name="question" value="Question???"><input type="submit" value=" ? ">
designhazard
07-01-2003, 11:12 PM
do you mean that someones click's the 'questions???' in the text box the text will dissapear? and the user can type?
tarq
07-02-2003, 08:21 AM
For some reason that forms not working but on my site when someone arrives at the site the text box already has a | cursor in the text box flashing so that people can just type the only problem is there is already a value in the text box that says Questions! and since the text is not highlighted the text won't disapear when you type and I waswondering if there is a way so that the text disapears when people type?
angelivion
07-02-2003, 12:34 PM
I have a different version for the code:

<script>
<!--

function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}
-->
</script>

put that in between the <head></head> tags

then, in your input code, add:

onFocus="clearText(this)"

Something like

<input name="tagboard_message" type="text" class="txtfield" size="25" maxlength="350" value="Message?" onFocus="clearText(this)">

of course, you have to add the onFocus thing in every input you want the value name to be clicked off. =)
tarq
07-02-2003, 02:12 PM
Hello angelivion, thank you for that code I tried it on its own and it worked fine but what if the text box is set to be in focus when the webpage is launched won't that mean that the text box is cleared before people get to see the value? Thanks again,
designhazard
07-02-2003, 10:55 PM
oh. know i understand. you want to clear out the 'Questions???'. when the visitor clicks on the text, it will disapear.

try to put this in your <input> tag.
onfocus="this.value='';"
tarq
07-03-2003, 11:19 AM
Hi I have added those to my script but the problem is Question? disapears before anyone gets the chance to read what it says. Is there anyway to have the box in focus (ready to type) and with a value already in the box which disapears as soon as the person types?


Also my CSS looks like this:
{ line-height: 6pt; text-align: justify; COLOR: #FE0204; FONT-FAMILY:tahoma; FONT-SIZE: 7pt; cursor: none; letter-spacing: 0pt}
A:link {COLOR: #000000; TEXT-DECORATION: none; font-weight: none; CURSOR: none; text-transform: none; letter-spacing: 0pt}
A:visited {COLOR: #000000; TEXT-DECORATION: none; font-weight: none; cursor: none; text-transform: none; letter-spacing: 0pt}
A:active {COLOR: #000000; TEXT-DECORATION: none; font-weight: none; cursor: none; letter-spacing: 0pt}
A:hover {COLOR: #FE0204; text-decoration:none; text-transform:none; cursor: none; letter-spacing:0pt}
body {scrollbar-face-color: #F0FF00; scrollbar-shadow-color: #F0FF00; scrollbar-highlight-color: #F0FF00; scrollbar-3dlight-color: #F0FF00; scrollbar-darkshadow-color:#F0FF00; scrollbar-track-color: #F0FF00; scrollbar-arrow-color: #000000}
-->

is there anyway to get the box to use the same CSS. Heres my current code below:

<input type="text" name="question" value="Question???" style="font-family:tahoma"" style="color:#000000" size="15" maxlength="100" style="border: 1 dotted #0f0f00; filter: chroma(color=#CCFF00); background: #CCFF00" onfocus="this.value='';" onFocus="clearText(this)"><input type="submit" value=" ? " style="font-family:tahoma"" style="border: 0px; filter: chroma(color=#C0C0C0); background: #C0C0C0">

Thankyou so much for your help guys! :D