Subject box placeholder vs default value

[samborabora]

I'd like to have it so the pm subject box that usually is prefilled with "no subject" could actually just have a placeholder value of "no subject", therefore if a user clicks the box into focus, the box appears blank and can be filled. If the user DOESN'T click the box, the message gets sent with the subject "no subject". A minor aesthetic alteration, but it would be nice to implement if possible. The problem with having a visible default value on the html side is that a placeholder can't be seen as it is already filled, and the user has to manually delete the existing value. With a placeholder, all you have to do is click on the box to begin typing. SMF just needs to check if the value is sending empty, and then can fill the subject in "behind-the-scenes" with the "no subject" value as a subject. I'm not sure if this needs doing with javascript or if a straight bit of php code could check for this?

[Hj Ahmad Rasyid Hj Ismail]

Interesting. I don't even notice this before. Well, may be because I don't do much pm.

[Sir Osis of Liver]

In PersonalMessage.template.php you can change this -

Koodi [Valitse] Laajenna



<input type="text" name="subject" value="', $context['subject'], '" tabindex="', $context['tabindex']++, '" size="60" maxlength="60" />



to this -

Koodi [Valitse] Laajenna



<input type="text" name="subject" value="', $context['subject'], '" tabindex="', $context['tabindex']++, '" size="60" maxlength="60"  onfocus="this.value=\' \'; this.onfocus=\' \';"/>



If field isn't clicked, it sends subject as (No subject).  If field is clicked, it clears, and subject must be entered, or pm will not send.  Sounds like that's what you're trying to do.  Only tested this in IE8.

[samborabora]

In PersonalMessage.template.php you can change this -

Koodi [Valitse] Laajenna



<input type="text" name="subject" value="', $context['subject'], '" tabindex="', $context['tabindex']++, '" size="60" maxlength="60" />



to this -

Koodi [Valitse] Laajenna



<input type="text" name="subject" value="', $context['subject'], '" tabindex="', $context['tabindex']++, '" size="60" maxlength="60"  onfocus="this.value=\' \'; this.onfocus=\' \';"/>



If field isn't clicked, it sends subject as (No subject).  If field is clicked, it clears, and subject must be entered, or pm will not send.  Sounds like that's what you're trying to do.  Only tested this in IE8.

I like this idea, much more appropriate than placeholder, and is almost a suitable solution... is it possible so that:

• It begins with the value "(No Subject)"
• If onfocus, it clears
• If the box is/becomes empty, either after being typed in, then cleared manually by the user, or gets onfocus, then clicked away, ie: onblur, the box returns to "No subject"

I've been playing with this for a while now, but I cna't quite get the right combination. Basically, I want it to emulate placeholders default behavior, with the exception that if placeholder is preset, it basically becomes the title of the PM (No subject being the title).

I'd also like it to be grey color if its showing "No Subject", but black if it's the text of the user, as placeholder is. Sorry if this is a fussy request, but I'm having trouble getting this html to work when it's in a template!

[Sir Osis of Liver]

If the box is/becomes empty, either after being typed in, then cleared manually by the user, or gets onfocus, then clicked away, ie: onblur, the box returns to "No subject"

Not sure why you want to do this, but can probably mod the php to send (No subject) if field is left empty, or just send empty field (same thing to recipient).

I'd also like it to be grey color if its showing "No Subject", but black if it's the text of the user, as placeholder is. Sorry if this is a fussy request, but I'm having trouble getting this html to work when it's in a template!

That's easily done.  Don't have time right now, will post it tonight.

[samborabora]

If the box is/becomes empty, either after being typed in, then cleared manually by the user, or gets onfocus, then clicked away, ie: onblur, the box returns to "No subject"

Not aure why you want to do this, but can probably mod the php to send (No subject) if field is left empty, or just send empty field (same thing to recipient).

I'd also like it to be grey color if its showing "No Subject", but black if it's the text of the user, as placeholder is. Sorry if this is a fussy request, but I'm having trouble getting this html to work when it's in a template!

That's easily done.  Don't have time right now, will post it tonight.

Yes, that was what I was thinking, using placeholder to hide/show the "no subject", and then just have the php see if it's blank, if so, send the subject as "no subject". Appreciate you taking a look into this for me!

[Sir Osis of Liver]

Ok, two things to do.

PersonalMessage.template.php -

Koodi [Valitse] Laajenna



<input type="text" name="subject" value="', $context['subject'], '" tabindex="', $context['tabindex']++, '" size="60" maxlength="60" style="color: #888888;" onfocus="this.value=\'\'; this.style.color=\'#000000\'; this.onfocus=\'\';"/>



This will make '(No subject)' grey, user input black.  Tested in IE8 - try it in other browsers.


/Sources/PersonalMessage.php -

Koodi [Valitse] Laajenna



/// Did they make any mistakes?
if ($_REQUEST['subject'] == '')
// $post_errors[] = 'no_subject';
$_REQUEST['subject'] = '(No subject)';



This will eliminate error for blank subject field, and replace it with '(No subject)'.

[samborabora]

Ok, two things to do.

PersonalMessage.template.php -

Koodi [Valitse] Laajenna



<input type="text" name="subject" value="', $context['subject'], '" tabindex="', $context['tabindex']++, '" size="60" maxlength="60" style="color: #888888;" onfocus="this.value=\'\'; this.style.color=\'#000000\'; this.onfocus=\'\';"/>



This will make '(No subject)' grey, user input black.  Tested in IE8 - try it in other browsers.


/Sources/PersonalMessage.php -

Koodi [Valitse] Laajenna



/// Did they make any mistakes?
if ($_REQUEST['subject'] == '')
// $post_errors[] = 'no_subject';
$_REQUEST['subject'] = '(No subject)';



This will eliminate error for blank subject field, and replace it with '(No subject)'.

Wow thanks, that's perfect!! I used:

Koodi [Valitse] Laajenna

<input type="text" name="subject" value="" tabindex="', $context['tabindex']++, '" size="60" placeholder="(No subject)" maxlength="60" />

And it worked well, I can see what you did now and this will be really useful for me to go away with and think about for future modifications. Thanks so much, Krash!!

[margarett]

Do note that "placeholder" attribute is XHTML invalid (it's only valid in HTML5)

Invalid markup does harm your ratings in search engines

[Arantor]

PMs aren't ever visible to guests therefore such invalid markup is not especially a big deal.

[margarett]

Ups, missed that "detail"

* margarett hides silently...

[samborabora]

Do note that "placeholder" attribute is XHTML invalid (it's only valid in HTML5)

Invalid markup does harm your ratings in search engines

Thanks, I'm one of those folks that was yearning for CSS3 and HTML5 back in 2003/2004 when all these treats seemed like a pipedream, so I tend to get carried away with new features whenever I work on this stuff, often forgetting backwards compatibility!   

PMs aren't ever visible to guests therefore such invalid markup is not especially a big deal.

But that's a good point, so it's not the worst of offences I guess! 

Shame placeholder tends to render differently on each browser, wish they could all just play the same one of these days...

[Hj Ahmad Rasyid Hj Ismail]

Some people posted this question in stackflow. Though no equivalent in html 4.x in can be overcomed. - http://stackoverflow.com/questions/19717336/what-is-the-alternative-of-placeholder-in-html-for-xhtml