Notes on using HTML5 input type=search and the placeholder attribute

<input type=search> is one of the HTML5 additions to form input types. In theory you can just replace the old <input type=text> with the new type and browsers continue to work and the site is now more semantic. In practice working with type=search is not that simple.

First thing you probably want to do is to remove Webkit’s default, heavy styling. You do that by these CSS commands:

-webkit-appearance:textfield; -webkit-box-sizing:content-box;

I initially used the former, but after some odd width calculation issues I found out that latter is also needed to actually fully restore familiar type=text behavior.

Placeholder text is another wonderful addition to input elements (not just type=search). This replicates the common behavior of having the search field label within the field itself (until the user focuses the field). You add placeholder text by adding an attribute to the input element like this: placeholder=”search this site”.

To gracefully degrade, use Modernizr to detect a browsers with no support:

jQuery(function($) {
	if (!Modernizr.input.placeholder || navigator.userAgent.match(/opera/i)) {
		$('input[placeholder]').hint();
	}
});

Here I decided to replace native placeholder support on Opera, since there are no styling options for it, yet. The text is always in #7f7f7f, which was not an option, since the background was exactly that color.

To style placeholder text you need these rules:

input[type=search].blur{color:#ddd}
input[type=search]::-webkit-input-placeholder{color:#ddd}
input[type=search]:-moz-placeholder{color:#ddd}

You cannot combine those selectors, since the rule will stop working as expected. .blur is for browsers that do not support native placeholder behavior.

And here is the modified version of the plugin that adds placeholder behavior. To make it more HTML5 friendly, I basically just replaced the use of title attribute with placeholder attribute.

/**
* @author Remy Sharp
* @url http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
* Modified to use placeholder attribute by Aki Björklund, https://akibjorklund.com/
*/
(function ($) {
	$.fn.hint = function (blurClass) {
		if (!blurClass) { 
			blurClass = 'blur';
		}

		return this.each(function () {
			// get jQuery version of 'this'
			var $input = $(this),

			// capture the rest of the variable to allow for reuse
			placeholder = $input.attr('placeholder'),
			$form = $(this.form),
			$win = $(window);

			function remove() {
				if ($input.val() === placeholder && $input.hasClass(blurClass)) {
					$input.val('').removeClass(blurClass);
				}
			}

			// only apply logic if the element has the attribute
			if (placeholder) { 
				// on blur, set value to placeholder attr if text is blank
				$input.blur(function () {
					if (this.value === '') {
						$input.val(placeholder).addClass(blurClass);
					}
				}).focus(remove).blur(); // now change all inputs to placeholder

				// clear the pre-defined text when form is submitted
				$form.submit(remove);
				$win.unload(remove); // handles Firefox's autocomplete
			}
		});
	};
})(jQuery);

530 tagin uudelleennimeäminen

Olin tagittanut Deliciousiin englannin kielellä ja omaan blogiini suomeksi. Kun otin käyttöön automaattipostaukset, piti tehdä käännöstyö kaikille 530 tagilleni. Samalla piti muuttaa kirjoitusasu kaikki pienellä -tyylistä luonnolliseksi. Delicious pakottaa yhden sanan tageihin, mutta hyvät tagisysteemit eivät. Päädyin korvaamaan sanavälit alaviivalla ja sitten WordPressin päässä juuri ennen tallennusta korvaan ne välilyönneillä.

Harmi vain, että Deliciousin käyttöliittymä tagien uudelleennimeämiseen ainakin noin massiivisessa skaalassa on äärimmäisen turhauttava:

Prosessi menee näin:

  1. Valitaan pudotusvalikosta 530 muun tagin joukosta haluttu tagi
  2. Viedään fokus pudotusvalikon alla olevaan kenttään
  3. Kirjoitetaan tagin uusi nimi kenttään
  4. Klikataan Save
  5. Odotetaan viitisen sekuntia
  6. Klikataan Rename another tag
  7. Odotetaan viitisen sekuntia
  8. Siirrytään kohtaan 1.

Tuota muutaman tagin verran tuskailtuani avasin GreaseMonkeyn ja aloin kirjoittaa JavaScriptiä. Reilua varttia myöhemmin minulla oli kasassa tämännäköinen systeemi:

Nyt prosessi menee näin:

  1. Klikataan valintalistalta tagia
  2. Tekstikenttään tulostuu klikattu tagi ja fokus siirtyy siihen. Korjataan tagin kirjoitusasu
  3. Painetaan enter
  4. Odotetaan pari sekuntia (lomake lähtee Ajax-pyyntönä eikä sivulta poistuta mihinkään)
  5. Siirrytään kohtaan 2. (listan seuraava tagi valittiin automaattisesti ja sen nimi asetettiin tekstikenttään oletusarvoksi)

Nopeasti laskien koodaussessioni maksoi helposti itsensä takaisin. Mutta vaikka se ei olisikaan maksanut, niin säilytetty verenpaine oli sen arvoista joka tapauksessa. Koodi on tarjolla vapaasti ladattavaksi ja hyödynnettäväksi niille, joita sattuu kiinnostamaan mitä tuollainen vaati. Varoitan, ettei jälki ole lainkaan kaunista.

Tämän myötä GreaseMonkey myi minut itselleen lopullisesti. Aikaisemmin olinkin sillä oikeastaan vain korjannut tietokone.fi:n äärimmäisen ärsyttävän, normaalin selailun tehokkaasti estävän automaattifokuksen.

jQuery and Microsoft

Scott Guthrie:

I'm excited today to announce that Microsoft will be shipping jQuery with Visual Studio going forward. We will distribute the jQuery JavaScript library as-is, and will not be forking or changing the source from the main jQuery branch.

weblogs.asp.net/… →