0

I want to have a textbox that by default contains something like "enter text here", but when clicked in, another word takes the default value's place.

What I have so far just contains the code to display the default value:

<input type="text" name="phrase" value="Enter text here..." size="24" onfocus="if(this.value == 'Enter text here...') { this.value = ''; }" onBlur="if(this.value == '') {this.value='Enter text here...';}">
beaverjam
  • 43
  • 5
  • What you have right now will work, just replace the empty `''` in the onfocus function with whatever you want the replaced text to be. [JSFiddle](http://jsfiddle.net/rp0m2rnm/) – APAD1 Aug 13 '14 at 19:18

4 Answers4

1

You should use placeholder for the text that goes off on focus:

<input type="text" data-default="Default" placeholder="Enter text here..." />

And I used data-default to hold the default value that will replace the placeholder

Given this, code below sets the input's value to data-default:

$(funcion(){
  $(input).on('click', function(){
      var $this = $(this),
          defaultValue = $this.data('default');

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

Here's a fiddle: http://jsfiddle.net/z4mhqgjg/

Ortiga
  • 8,455
  • 5
  • 42
  • 71
  • 1
    I agree, although it should be noted that IE8/9 does not support input placeholders without a [polyfill](https://github.com/ginader/HTML5-placeholder-polyfill). [CanIUse](http://caniuse.com/input-placeholder) – APAD1 Aug 13 '14 at 19:30
0

do you mean like this?

$('input').focus(function(){
    $(this).val('New Text');
});
$('input').blur(function(){
    $(this).val('Default Text');
});
Amin Jafari
  • 7,157
  • 2
  • 18
  • 43
0

Check out this snippet of code:

<input type="text" name="phrase" value="Enter text here..." size="24" onfocus="if(this.value == 'Enter text here...') { this.value = 'New Value goes here'; }" onBlur="if(this.value == '' || this.value == 'New Value goes here') {this.value='Enter text here...';}" onkeypress="if(this.value == 'New Value goes here') { this.value = ''; }" >

This is what you need. Demo: http://jsbin.com/homapa

williamukoh
  • 566
  • 6
  • 9
  • Because it just works – williamukoh Aug 14 '14 at 22:49
  • 2
    That's not really an explanation on why it works. Could you please [edit] in an explanation of *why your answer works?* – hichris123 Aug 15 '14 at 00:18
  • 1
    Please consider including some information about your answer, rather than simply posting code. We try to provide not just 'fixes', but help people learn. You should explain what was wrong in the original code, what you did differently, and why your change(s) worked. – Andrew Barber Aug 28 '14 at 21:32
  • If your teacher / professor taught you something, and you wanted clarification and asked why it works, would you really accept an answer of "because it just works" as satisfactory? You would rather take the word of someone rather than really understanding the behaviour for yourself? In order to help people learn, you should accompany your post with a bit of explanation. That way, it discourages copying and pasting with a lack of understanding. – rayryeng Sep 07 '14 at 07:39
0

With jQuery, you can use the .focusin() event handler to change the value of your input.

It can look like this :

HTML:

<input type="text" id="mybox" name="phrase" value="Enter text here..." size="24"/>

Javascript:

$('#mybox').focusin(function() {
    $(this).val('your new text here');
});

JSFiddle demo here with use of .focusout() also: http://jsfiddle.net/jpreynat/f9ffudof/8/

jpreynat
  • 950
  • 9
  • 9