jQuery – Helpful Default Input Values

Brandon Buttars — Mon, 07 Dec 2009 01:54:19 +0000

I’ve recently wanted to try and use some different code to add some default values to my input fields, especially the search box. Most code I’ve seen does some type of a label overlay which involved a lot of freaking code. I finally found some code and did a little tweaking to it to fit my situation. You can also find it under my Snipplr code.

$(function(){ $('input[type="text"]').each(function(){ if(this.value==''){this.value='Enter Value'} }); $('input[type="text"]').focus(function(){ if(this.value=='Enter Value'){this.value=''} }); $('input[type="text"]').blur(function(){ if(this.value==''){this.value='Enter Value'} }); });

The first part of the code identifies that if the value of the input field is empty add ‘Enter Value’. The second part of the code removes the value ‘Enter Value’ from input fields as it gains focus. The last part of the code adds ‘Enter Value’ to empty fields as they lose focus. This code may not work in every situation, but it can help in some situations. Let me know how it works and if you found other modifications of the code that work even better. This is a dependent on jQuery but I’m sure you may find a version that can adapt to other libraries or straight JavaScript.

CSS HTML Class – Browser and Operating System

Brandon Buttars — Mon, 07 Dec 2009 01:32:26 +0000

I was trying to find a good snippet of code that would help me style the different browsers better. I’ve used all the attribute hacks before but one thing I’ve run into lately is the fact that Chrome and Safari end up interpreting and displaying input tags differently even though they are both Webkit based. There were not individual attribute hacks that I could find, but I was able to find this beauty over at http://github.com/rafaelp/css_browser_selector. I’ve also added the code to my Snipplr Arsenal so you can get it over at http://snipplr.com/view/23988/adds-os-and-browser-class-to-html-tag/

/* CSS Browser Selector v0.3.4 (Sep 29, 2009) Rafael Lima (http://rafael.adm.br)


http://rafael.adm.br/css_browser_selector

License: http://creativecommons.org/licenses/by/2.5/ Contributors: http://rafael.adm.br/css_browser_selector#contributors */ function css_browser_selector(u){var ua = u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1;},g='gecko',w='webkit',s='safari',o='opera',h=document.getElementsByTagName('html')[0],b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?'mobile':is('iphone')?'iphone':is('ipod')?'ipod':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win':is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);

That code makes it so I can even validate my CSS and get rid of my attribute hacks. The code adds a bunch of different classes to your HTML tag. It adds the Operating System, the Browser, the Browser Version, and if Javascript is enabled or not. You can do a lot with that info. I was able to then create a Chrome specific style for my stylesheet. Love this code. It has been added to my regular arsenal of code.

Just include that code in your head or reference it as a separate file in your head. I prefer a separate file, but to each their own.

Brandon Buttars » Javascript

jQuery – Helpful Default Input Values

CSS HTML Class – Browser and Operating System