输入字段的多个默认值

Question

I would like to have a search box input field that flashes multiple default values when not in focus. As in "New York" for 3 seconds, then "Los Angeles" for 3 seconds, etc. or to simulate typing of these would also be nice.

What i have done is this

http://jsfiddle.net/5aD7W/1/

but the problem is that the .val() gets overridden every 3 seconds even when it is in focus.

Answer 1

One way That I came up with:

var words = ['New York', 'Los Angeles', 'Home'];
var $search = $('#searchId');
var index = -1;

function foo() {

    if ($search.is(':focus')) {
        return;
    }
    index++;
    $search.val(words[index % words.length]);
}​

setInterval(foo, 3000);

Live DEMO

Answer 2

You can do it like this Demo on JsFiddle

In html

<input id="txtCity" type="text" value="New York"  />​

IN script

  arr = ["New York", "Los Angesles", "London"];
txtCity = $('#txtCity');
i=0;
setInterval(function(){ 

    if (txtCity.is(':focus')) 
        return;   
    txtCity.val(arr[i++]);
    if(i==arr.length)
         i = 0;
}, 2000);

$('#txtCity').focus(function(){
    this.value=""
 });
​
​

Answer 3

You will need some scripting to do this, so jQuery is a good way to go. Simple markup won't solve your problem. Related: Changing the "placeholder" attribute of HTML5 input elements dynamically using Javascript