J.me

Best practice to clearing default text with jQuery

Having default text that we later removed when retrieving user input is common in today’s website. Many web developer use this to enhance usability of the website, so user know what to type in what field. There is a lot of way to do this, using both focus and blur event. For example, this is the shortest and easiest way that is commonly used:


 

1
<input type="text" id="example-field" name="example-field" value="Your name" onfocus="if (this.value=='Your name') this.value=''" onblur="if (this.value=='') this.value='Your name'" />

However, this approach will be a pain when you are managing a lot of input fields. You will need to type the default text three times, which can lead to a trivial typo. Also, since we check againts the default value, we will not be able to accept this value. Here is the solution, by using the simplicity and power of jQuery, this is a clean and a better way to do this.

Filter get_terms to return only terms with published post

So you are using custom taxonomy. You add terms to the taxonomy, and add the terms to your posts. Then, you use get_terms and list all your terms. Everything works fine, terms that doesn’t have any posts will not be returned if you set hide_empty argument to true. Now you move some of your posts to draft and you get a problem. Terms that doesn’t have any published posts still returned. This lead to 404 error when you click on the link of this term. It doesn’t look good now, we need to remove term that doesn’t have any published post.

So how to do that? The answer is by using WordPress filter. This piece of code below will solve the problem.

CSS Captcha 0.2 beta

Here I update the CSS Captcha, it is now on 0.2 beta! Thank you for the response of the previous version. While this can work nicely on major new browser, the compatibility with older browser is still minimum. Some mobile browser also haven’t implement some of CSS3 functionality, such as Opera Mini and Opera Mobile. So this is still experimental and shouldn’t be used yet on production website.

Please read the older version information here.

This update is merely a security update. The inline style is randomized now, which make it more difficult for bot to read. The order of the character is also randomized. Sure, it still doesn’t prevent the bot to read or make it impossible to read at all, but it should give more difficulty on creating such bot. 🙂

Still, no support for IE browser at all. 🙁

Change log 0.2b:
– Automatically randomize inline style
– Automatically randomize character order

Demonstration
Download

Enjoy! Any comment is appreciated.