mootools_MooTools表单字段默认插件

mootools

One nice, subtle enhancement you can add to your website is a default input value that disappears when the user clicks into the field and reappears if the user leaves the field empty. It's rather easy to do, but I decided to create a MooTools class for it anyway.

您可以添加到网站中的一个不错的，微妙的增强功能是默认输入值，当用户单击该字段时该默认输入值消失，如果用户将该字段留空则该默认输入值会重新出现。 这很容易做到，但是我还是决定为它创建一个MooTools类。

XHTML (The XHTML)

	<input type="text" class="defs" rel="Search here..." />
	<input type="text" class="defs" rel="Email address" />
	<input type="text" class="defs" rel="Like whoa!" />

Each field's default value will be whatever gets placed in the rel attribute.

每个字段的默认值将是在rel属性中放置的任何值。

MooTools JavaScript类 (The MooTools JavaScript Class)

var dwDefaults = new Class({
	//implements
	Implements: [Options],

	//options
	options: {
		collection: $$('input[type=text]')
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		this.defaults();
	},
	
	//a method that does whatever you want
	defaults: function() {
		this.options.collection.each(function(el) {
			el.set('value',el.get('rel'));
			el.addEvent('focus', function() { if(el.get('value') == el.get('rel')) { el.set('value',''); } });
			el.addEvent('blur', function() { if(el.get('value') == '') { el.set('value',el.get('rel')); } });
		});
	}
	
});

For every item in the collection, we add focus and blur event that controls whether the item's message should be removed or shown.

对于集合中的每个项目，我们添加焦点和模糊事件，以控制是否应删除或显示该项目的消息。

MooTools JavaScript用法 (The MooTools JavaScript Usage )

window.addEvent('domready', function() {
	var defs = new dwDefaults({
		collection: $$('input.defs')
	});
});

All you have to do is provide the collection!

您所要做的就是提供收藏！

There you have it! I would've done a jQuery plugin but it's already out there.

你有它！ 我会做一个jQuery插件，但已经在那里了。

翻译自: https://davidwalsh.name/mootools-form-field-default-plugin

mootools