Placeholder for Text Areas ?

[dimebag.d]

Hi guys.
I am trying add a default text to quick reply and post area but i cant.

http://i.imgur.com/fmiPOmC.jpg
and
http://i.imgur.com/8dqHF94.jpg

So how can i do these? Thanks.

*i am using vb 4.2.1

[MarkFL]

Are you trying to add a field where your users can enter text, or do you want some default text to already appear in the post message area when the form is loaded?

[dimebag.d]

do you want some default text to already appear in the post message area when the form is loaded?

Yes.Like this;
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_placeholder

How can i do that?

[MarkFL]

Ah, okay now I know exactly what you mean. :)

It is likely possible for the standard editor, but it may not be possible for the WYSIWYG editor. I will look into it very soon, and post back what I find. ;)

--------------- Added 1458100198 at 1458100198 ---------------

As I suspected, it won't work with the WYSIWYG editor (it is an inline document), but for the Standard editor you can use the following plugin:

Product: vBulletin

Hook Location: parse_templates

Title: Give Standard Editor Textarea A Placeholder

Execution Order: 5

Plugin PHP Code:

if (in_array(THIS_SCRIPT, array('showthread', 'newreply', 'newthread')))
$template_hook['footer_javascript'] .= '<script>
window.onload = function(){
var el = document.getElementsByClassName("cke_source");
el[el.length - 1].placeholder = "Enter Post Here...";
};
</script>';

Plugin is Active: Yes

Click "Save".

[dimebag.d]

Hey Mark! Thanks man, its working perfectly :)

https://vborg.vbsupport.ru/external/2016/03/7.jpg

[Stratis]

Mark, can you please tell if I can include color code and image code
in the above Hook? if I can how?

Thank you in advanced.

[MarkFL]

Hey Stratis,

What do you mean by including color/image code?

[Stratis]

Lets say that i want to change the color of the text "Enter Post Here..."
or place an image to show instead of text.

:)

[MarkFL]

It is possible to use (browser-specific) CSS to change the color of the placeholder text, but I don't think you can use an image as a placeholder. :)

[Stratis]

Ok thanks for the answer Mark.

[MarkFL]

Ok thanks for the answer Mark.

I will look into turning this into a product tonight where you can set the color, and other attributes of the placeholder, from the settings. :)

[Stratis]

I only want the color code to insert to the hook, after that I will find the css to play around :)
because this does not works to WYSIWYG editor.

But you know better if this can be done as product :D

[MarkFL]

I only want the color code to insert to the hook, after that I will find the css to play around :)
because this does not works to WYSIWYG editor.

But you know better if this can be done as product :D

Yes, the WYSIWYG editor is an inline document, not a textarea, and so cannot be assigned a placeholder attribute.

In order to change the CSS of the placeholder text, it is best to have CSS selectors loaded so that the code for all the different browsers can be included, and a class name can be assigned to the textarea element.

[MarkFL]

Okay, here is a beta version...I have rrewritten the javascript so that it won't interfere with any other onload functions (like the toolbar tooltips I recently did), use a vbphrase for the placeholder text, and give in the settings an HTML colorpicker for the text color, and allow for any additional CSS to be added:

https://vborg.vbsupport.ru/attachment.php?attachmentid=154521&stc=1&d=1458274341

With those settings, my quick editor looks like:

https://vborg.vbsupport.ru/attachment.php?attachmentid=154522&stc=1&d=1458274341

Let me know what you think...:)

[RichieBoy67]

This is a great plug in Mark!

OP: I can see this being useful but if not used correctly I could also see it displaying the same text with every post which would be terrible for seo.

[MarkFL]

This is a great plug in Mark!

OP: I can see this being useful but if not used correctly I could also see it displaying the same text with every post which would be terrible for seo.

It only displays in the empty editor textarea, as soon as you begin typing text in the editor, it disappears. :)

[RichieBoy67]

Ah in that case PERFECT!!!! I think I may use this! Thanks Mark!:up::up:

[Stratis]

Ok Mark i will test it, thanks you.

--------------- Added 18 Mar 2016 at 08:56 ---------------

Well, it seems i have some issues.
* it does not work in IE11 & Edge
* it works with Firefox & Chrome
* even if change phrase "Enter Post Here..." in $vbphrase[markfl_editorplaceholder_text] does not take effect, it shows the default text.

* CSS change works.

EDIT:
*Have in my mind, as default, quick reply is open, users don't need to press to see.
*The first hook test before this modification, did not work in all browsers either.


Thanks...

[Stratis]

I found what is causing the half issue.

154527

Plugin "Add Placeholder To Editor" is disabled.


As i saw in xml file "<plugin active="0" executionorder="5">" active is to "0"
is this how its supposed to be? Any way when i activate the specific plugin
changes to phrase works fine.

Still only works with Firefox & Chrome ;)

EDIT:
One more, in "Text Formatting" option, works only what i put first.
Example
font-size: 1.3em;
background: #FFFF1A;

Only first "font-size works", if i change order, than only "background" works.

Trim? :p

Thanks

[MarkFL]

Here is an update...and I'm not surprised IE fails...it marches to the beat of a different and deranged drummer. ;)

[Stratis]

Works fine now.

Don't say that kind of words for my lovely browser :p

I must live with this ,lol


Thanks Mark

[MarkFL]

I will make some effort for wide browser support, but if in the end IE fails I simply advise users to upgrade to a modern browser like Firefox or Chrome, rather than bloat my code with workarounds for a broken browser. :)

[Stratis]

I will make some effort for wide browser support, but if in the end IE fails I simply advise users to upgrade to a modern browser like Firefox or Chrome, rather than bloat my code with workarounds for a broken browser. :)

This is can begin a big discussion which is better or not from technical eye.

As you see I have all browsers, i am not a coder but i am technician on pc for 30 years and I know all facts for all browsers. Modern browser like Firefox you say, and all times problems until today :D lol. Or Chrome, double slower and heavy, that does not support many css tricks (shade, etc) ;)

Any way..

Mark I tested some more css to modification and its very nice. Love it