ansaurus

Question

Form Tricks

Answer 1

+5 A:

The first trick is just a preset value. And when you click the field it has an onclick function that checks. Is the value "Write your email here". If so, clear the field. If not do nothing.

It then has an onblur function that checks, is the field empty. If so, print "Write your email here" in it.

The 2nd one is JavaScript as well.

Here is an Example page with both these functions

<html>
<script type="text/javascript">
 function searchBox()
 {
  elem = document.getElementById("search");

  if(elem.value == "Search...")
  {
   elem.value = "";
  }
 }

 function searchBoxBlur()
 {
  elem = document.getElementById("search");

  if(elem.value == "")
  {
   elem.value = "Search...";
  }
 }

 function init()
 {
  document.getElementById("other_box").focus();
     }
     window.onload = init;
    </script>
<body>
    <input type="text" name="other_box" id="other_box" />
    <input type="text" name="search" id="search" value="Search..." onclick="searchBox()" onblur="searchBoxBlur()" />
</body>
</html>

Ólafur Waage 2009-06-23 14:41:37

so that means javascript?

OrangeRind 2009-06-23 14:42:19

Yes .

Ólafur Waage 2009-06-23 14:42:42

what should be the code. I am not experienced at javascript.

OrangeRind 2009-06-23 14:43:12

great! thanks!maybe they should remove the min 15 char limit on comments!I wonder why they have it in the first place?otherwise this comment could have had just "great thanks!" which would have done you, me and everybody else a lot more good (including my keyboard) ;-)

OrangeRind 2009-06-23 15:17:59

Lots of spaces after last character. Like I did in the Yes comment above. You don't see it but it's there.

Ólafur Waage 2009-06-23 15:33:26

neat! .

OrangeRind 2009-06-23 17:14:58

Answer 2

+1 A:

This will require javascript (via the jQuery framework). The following was quickly typed-up, and untested. May require some minor tinkering. If you have questions - ask :)

Auto-focus Desired Element
Change Element Text Color when out of focus
Show default text, when user-provided text isn't present

/* Run our work once the document is ready (loaded */
$(document).ready(function(){

  /* Set initial state of field */
  $("input.first-name").val("First Name").css("color", "#CCCCCC");

  /* Attach logic to the .focus() event of our input field */
  $("input.first-name").focus(function(){

    /* What to do when this field is focused */
    $(this).val("").css("color", "#333333");

  }).blur(function(){

    /* What to do when the field is blurred */
    if ($(this).val() == "") {

      /* Set value to 'First Name,' and set color to light gray */
      $(this).val("First Name").css("color", "#CCCCCC");

    }

  });

  /* Autofocus our field */
  $("input.first-name").focus();

});

Jonathan Sampson 2009-06-23 14:47:46

is this jQuery? or javascript?

OrangeRind 2009-06-23 14:56:24

This is jQuery.

Ólafur Waage 2009-06-23 14:56:58

It's javascript, via the jQuery framework. jQuery basically makes javascript much easier to work with. It allows you to do more, quicker. And it keeps you from having to work out differences between the way IE, FF, and other browsers handle javascript.

Jonathan Sampson 2009-06-23 15:01:48

Answer 3

A:

There are non-standard attributes you may consider: placeholder (works in safari i guess) and autofocus (a part of HTML5 spec).

implement placeholder in Javascript
You can do the similar with autofocus (just fire InputElement.focus())

Maciej Łebkowski 2009-06-23 14:47:54

Answer 4

A:

myField.focus();

That should place the cursor in myField when the page loads (if you place it at the end or in a $(document).ready() jQuery block). I have seen some inconsistent behavior with this in different browsers, so your mileage may vary.

As far as setting the color of a text field's input, I would set it to have a default value and add a separate CSS class when the user clicks into it:

And your CSS would look like:

.grayedInputField {
    color: gray;
}
.activeInputField {
    color: black;
}

And when the user clicks into the field, have javascript add a class to the field to change the text color, like so (again, jQuery):

 $(".grayedInputField").focus(function(){$(this).addClass("activeInputField")});

inkedmn 2009-06-23 14:47:57

Answer 5

+1 A:

The first, quick and dirty:

<input name="foo" value="Default text OMG!" onfocus="if(this.value == 'Default text OMG!') this.value = ''"/>

Making that onfocus event a function in an external JavaScript file is recommend. That would yield:

External script:

function checkText(el,someText){ if(el.value == someText) el.value = ''}

Your input:

<input name="foo" value="Default text OMG!" onfocus="checkText(this,'Default text OMG!')"/>

The second: Give the input that you want "focused" an ID and do something like this:

<input id="foo" name="foo" value="Default text OMG!"/>

And in a script:

window.onload = function(){ document.getElementById('foo').focus() }

ajm 2009-06-23 14:49:20

+1, for being simple.

altCognito 2009-06-23 15:08:44

ya i agree with altcognito. :)but Olafur's answewr turned out to be more comprehensive and nearer to what i wanted. still thanks a lot

OrangeRind 2009-06-23 15:15:37

Answer 6

+1 A:

There is no non-javascript way to do the first part of your question. As far as the second part is concerned, it can be easily done with javascript, but even without it, most modern browsers add focus to the first input field.

Javascript code

Just set the value to the input field to your preset value -

function focus_function() { if (this.value=="Enter email here") { this.value=""; this.class="actualEmail"; } }

function blur_function() { if (this.value=="") { this.value="Enter email here"; this.class="preset"; } }

You can have two css classes, 'preset' and 'actualEmail' and specify different colors etc

Just have an onload function which puts focus on the required input field.

window.onload = function() { document.getElementById("email_field").focus(); }

Shreyas 2009-06-23 14:50:09

ansaurus

tags:

views:

answers:

Form Tricks

related questions