Text field

[hamfast]

Hello people

How do I manipulate a text field so that it the text I want in it is automatically deleted when typing in the field commences?

Cheers
hf

[djr33]

<input type="text" value="default" onFocus="if(this.value=='default'){this.value='';}" onBlur="if(this.value=''){this.value=='default';}">
There might be a better way by making the string 'default' a variable you can change at one place in the code, but that's the simplest way to code this.

At least I think that was your question.

[Twey]

<input
    type="text"
    value="blaaaaaaaaaah!"
    onfocus="this.value === this.defaultValue && (this.value = '');"
    onblur="this.value = this.value || this.defaultValue;">

[boogyman]

onfocus="this.value === this.defaultValue && (this.value = '');"

Twey, how does that equate to deleting the default value once focused on? or maybe I misunderstood the question? but by Daniel's response I do not believe I did.

[djr33]

The second line works because it will be the second term (ie the default value) if the first term evaluates to false.
But the first line, which you quoted, does confuse me as well. I assume it works, but I haven't seen that syntax before. I think he's just having fun with our minds

[Twey]

I think he's just having fun with our minds

*super-villain-Steve laugh*

But the first line, which you quoted, does confuse me as well.

Same principle -- if this.value === this.defaultValue is true, (this.value = '') is evaluated. It works because JS is lazy: if this.value !== this.defaultValue, then the expression as a whole can never be true, so it doesn't even bother evaluating the rest.

[boogyman]

if this.value === this.defaultValue is true, (this.value = '') is evaluated.

Yes I got the evaluation. what I was confuseda bout was the && which is from an operand. So in verbose terms I read that line as

if (this value) is equal to the default value AND (this value) equals nothing
Which to me would seem like it would toss an error because there is an equation being performed but no aoperation based upon the equation.. Again this may just be my lack of knowledge of Javascript, but was just looking for some clarification

It works because JS is lazy: if this.value !== this.defaultValue, then the expression as a whole can never be true, so it doesn't even bother evaluating the rest.

I did pick up on that, because both statements would need to be evaluate as true for the operation to be performed.... (operation , ya that was my first question)

onblur="this.value = this.value || this.defaultValue;"

The second line works because it will be the second term (ie the default value) if the first term evaluates to false.

I understood that portion, which is why I only quoted the first statement and not both, but I am sure that someone is reading this now or will in the future and have that question so good pointing out

[Twey]

if (this value) is equal to the default value AND (this value) equals nothing

Uh-uh. That's assignment, not comparison. It doesn't translate well into English, but something like: if the value equals the default value AND the result of assigning an empty string to the value is truthy, and then yes indeed, we do nothing with the result of the expression (the side-effect of assignment is the important part of it).

[Trinithis]

*super-villain-Steve laugh*

lol. Having too much fun there with your new name?

[boogyman]

well that's one I will have to wrap my head around a few times, but thanks for the translation sir.