Alternativní typy vstupu HTML5

Jak možná víte, HTML5 zavedlo několik nových typů vstupu:číslo, datum, barva, rozsah atd. Otázka zní:měli byste tyto ovládací prvky začít používat nebo ne? I když chci říct „Ano“, myslím, že ještě nejsou připraveni na žádný skutečný projekt. Hlavním důvodem je nekonzistentní implementace různými prohlížeči.

Ve formuláři níže můžete vidět některé typy vstupu HTML5. V závislosti na vašem prohlížeči můžete nebo nemusíte vidět žádný rozdíl od běžného ovládacího prvku vstupu.

Co byste tedy měli použít? Můžete vyvinout své vlastní typy vstupů nebo použít existující knihovnu. Každý pravděpodobně zná výběr data jQuery nebo jiné zásuvné moduly jQuery, které přicházejí na záchranu. Zatím jsem však nenašel komplexní knihovnu, která by vyhovovala všem mým vstupním potřebám, a tak jsem se rozhodl sestavit svou vlastní, která by byla malá, konzistentní a pokrývala následující oblasti:

• Číselné vstupy
• Datum a čas
• Rozbalovací seznamy
• Vícenásobný výběr
• Nahrání souboru

Na těchto ovládacích prvcích jsem pracoval v průběhu několika posledních let jako součást velké knihovny nazvané W2UI. Uvědomil jsem si však, že samostatná knihovna pouze s ovládacími prvky vstupu může být docela užitečná.

Číselné vstupy

Číselné vstupy vám umožní zadávat pouze čísla. Všechny ostatní postavy budou zcela ignorovat. Je implementována plná podpora klávesnice. Zkuste použít up /dolů šipky, ovládací prvek + nahoru /dolů (příkaz + nahoru /dolů na Macu) pro zvýšení počtu. Když se číslo změní, bude ověřeno a naformátováno (v případě potřeby).

Nastavení HTML

<!-- General inputs -->
<div class="w2ui-label"> Integer: </div>
<div class="w2ui-field"> <input id="w2int"> </div>
<div class="w2ui-label"> Float: </div>
<div class="w2ui-field"> <input id="w2float"></div>
<div class="w2ui-label"> Hex: </div>
<div class="w2ui-field"> <input id="w2hex"></div>
<div class="w2ui-label"> Color: </div>
<div class="w2ui-field"> <input id="w2color"></div>

<!-- US format -->
<div class="w2ui-label"> Integer: </div>
<div class="w2ui-field"> <input id="us-int" value="0"> </div>
<div class="w2ui-label"> Float: </div>
<div class="w2ui-field"> <input id="us-float" value="0"> </div>
<div class="w2ui-label"> Money: </div>
<div class="w2ui-field"> <input id="us-money" value="0"> </div>
<div class="w2ui-label"> Percent: </div>
<div class="w2ui-field"> <input id="us-percent" value="0"> </div>

<!-- EU common format -->
<div class="w2ui-label"> Integer: </div>
<div class="w2ui-field"> <input id="eu-int" value="0"> </div>
<div class="w2ui-label"> Float: </div>
<div class="w2ui-field"> <input id="eu-float" value="0"> </div>
<div class="w2ui-label"> Money: </div>
<div class="w2ui-field"> <input id="eu-money" value="0"> </div>
<div class="w2ui-label"> Percent: </div>
<div class="w2ui-field"> <input id="eu-percent" value="0"> </div>

Vytvoření interaktivních polí

// General
$('#w2int').w2field('int', { autoFormat: false });
$('#w2float').w2field('float', { autoFormat: false });
$('#w2hex').w2field('hex');
$('#w2color').w2field('color');

// US Format
$('#us-int').w2field('int', { autoFormat: true });
$('#us-float').w2field('float', { precision: 3 });
$('#us-money').w2field('money', { moneySymbol: '$' });
$('#us-percent').w2field('percent', { precision: 1, min: 0, max: 100 });

// EU Common Format
$('#eu-int').w2field('int', { autoFormat: true, groupSymbol: ' ' });
$('#eu-float').w2field('float', { groupSymbol: ' ', precision: 3 });
$('#eu-money').w2field('money', { groupSymbol: ' ', currencyPrefix: '', currencySuffix: '€' });
$('#eu-percent').w2field('percent', { precision: 1, min: 0, max: 100 });

Druhý argument je seznam možností, které zahrnují následující:

options = {
	min             : null,
	max             : null,
	placeholder     : '',
	autoFormat      : true,
	currencyPrefix  : '$',
	currencySuffix  : '',
	groupSymbol     : ',',
	arrows          : false,
	keyboard        : true,
	precision       : null,
	silent          : true,
	prefix          : '',
	suffix          : ''
}

Datum a čas

U typů DATE a TIME můžete pomocí klávesnice zvýšit o den (nebo minutu), pokud kliknete na nahoru /dolů šipky. Můžete také použítctr + nahoru /dolů (příkaz + nahoru /dolů na mac) zvýšit o měsíc (nebo hodinu).

Nastavení HTML

<!-- US format -->
<div class="w2ui-label"> Date: </div>
<div class="w2ui-field"> <input type="us-date"> </div>
<div class="w2ui-label"> From-To: </div>
<div class="w2ui-field"> <input type="us-dateA"> <span class="legend">(from 10th to 20th of current month)</span></div>
<div class="w2ui-label"> Blocked Days: </div>
<div class="w2ui-field"> <input type="us-dateB"> <span class="legend">(12,13,14 of current month are blocked)</span></div>
<div class="w2ui-label"> Date Range: </div>
<div class="w2ui-field"> <input type="us-date1"> - <input type="us-date2"> </div>
<div class="w2ui-label"> Time: </div>
<div class="w2ui-field"> <input type="us-time"> </div>
<div class="w2ui-label"> From-To: </div>
<div class="w2ui-field"> <input type="us-timeA"> <span class="legend">(from 8:00 am to 4:30 pm)</span></div>

<!-- EU common format -->
<div class="w2ui-label"> Date: </div>
<div class="w2ui-field"> <input type="eu-date"> </div>
<div class="w2ui-label"> From-To: </div>
<div class="w2ui-field"> <input type="eu-dateA"> <span class="legend">(from 10th to 20th of current month)</span></div>
<div class="w2ui-label"> Blocked Days: </div>
<div class="w2ui-field"> <input type="eu-dateB"> <span class="legend">(12,13,14 of current month are blocked)</span></div>
<div class="w2ui-label"> Date Range: </div>
<div class="w2ui-field"> <input type="eu-date1"> - <input type="eu-date2"> </div>
<div class="w2ui-label"> Time: </div>
<div class="w2ui-field"> <input type="eu-time"> </div>
<div class="w2ui-label"> From-To: </div>
<div class="w2ui-field"> <input type="eu-timeA"> <span class="legend">(from 8:00 am to 4:30 pm)</span></div>
<div style="height: 20px; clear: both"></div>

Vytvoření interaktivních polí

var month = (new Date()).getMonth() + 1;
var year  = (new Date()).getFullYear();

// US Format
$('input[type=us-date]').w2field('date');
$('input[type=us-dateA]').w2field('date', { format: 'm/d/yyyy', start:  month + '/5/' + year, end: month + '/25/' + year });
$('input[type=us-dateB]').w2field('date', { format: 'm/d/yyyy', blocked: [ month+'/12/2014',month+'/13/2014',month+'/14/' + year,]});
$('input[type=us-date1]').w2field('date', { format: 'm/d/yyyy', end: $('input[type=us-date2]') });
$('input[type=us-date2]').w2field('date', { format: 'm/d/yyyy', start: $('input[type=us-date1]') });
$('input[type=us-time]').w2field('time',  { format: 'h12' });
$('input[type=us-timeA]').w2field('time', { format: 'h12', start: '8:00 am', end: '4:30 pm' });

// EU Common Format
$('input[type=eu-date]').w2field('date',  { format: 'd.m.yyyy' });
$('input[type=eu-dateA]').w2field('date', { format: 'd.m.yyyy', start:  '5.' + month + '.' + year, end: '25.' + month + '.' + year });
$('input[type=eu-dateB]').w2field('date', { format: 'd.m.yyyy', blocked: ['12.' + month + '.' + year, '13.' + month + '.' + year, '14.' + month + '.' + year]});
$('input[type=eu-date1]').w2field('date', { format: 'd.m.yyyy', end: $('input[type=eu-date2]') });
$('input[type=eu-date2]').w2field('date', { format: 'd.m.yyyy', start: $('input[type=eu-date1]') });
$('input[type=eu-time]').w2field('time',  { format: 'h24' });
$('input[type=eu-timeA]').w2field('time', { format: 'h24', start: '8:00 am', end: '4:30 pm' });

Možnosti pro datum

options = {
	format      : 'm/d/yyyy',  // date format
	placeholder : '',
	keyboard    : true,
	silent      : true,
	start       : '',          // string or jquery object
	end         : '',          // string or jquery object
	blocked     : {},          // { '4/11/2011': 'yes' }
	colored     : {}           // { '4/11/2011': 'red:white' }
};

Možnosti pro čas

options = {
	format      : 'hh:mi pm',
	placeholder : '',
	keyboard    : true,
	silent      : true,
	start       : '',
	end         : ''
};

Rozbalovací seznamy

Běžný vstup je pěkný, ale dost omezený. Například je obtížné použít tento ovládací prvek na velké sadě možností. Abych poskytl řešení, implementoval jsem rozevírací seznam založený na textovém vstupu, ale s dynamickým seznamem možností, které se filtrují při psaní.

Nastavení HTML

<div class="w2ui-label"> List: </div>
<div class="w2ui-field"> <input type="list"> <span class="legend">Cannot type any text, but only items from the list</span> </div>
<div class="w2ui-label"> Combo: </div>
<div class="w2ui-field"> <input type="combo"> <span class="legend">You can type any text</span> </div>

Je implementována plná podpora klávesnice a přichází se spoustou konfiguračních parametrů:dynamické stahování seznamu možností z adresy URL, vlastní funkce vykreslování, události atd.

Vytvoření interaktivních polí

var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', ...];
$('input[type=list]').w2field('list', { items: people });
$('input[type=combo]').w2field('combo', { items: people });
// if you need to get to the selected items, use:
// $('#id').data('selected');

Možnosti pro seznam

options = {
	items       : [],
	selected    : {},           // selected item as {}
	placeholder : '',
	url         : null,         // url to pull data from
	cacheMax    : 500,
	maxWidth    : null,         // max width for input control to grow
	maxHeight   : 350,          // max height for input control to grow
	match       : 'contains',   // ['contains', 'is', 'begins with', 'ends with']
	silent      : true,
	onSearch    : null,         // when search needs to be performed
	onRequest   : null,         // when request is submitted
	onLoad      : null,         // when data is received
	render      : null,         // render function for drop down item
	showAll     : false,        // weather to apply filter or not when typing
	markSearch  : true
};

Rozbalovací seznamy s více možnostmi

Další ovládací prvek, na který jsem hrdý, je multi-select. Nedokážu si představit, jak jsem bez toho žil. Zjednodušilo mi to všechny návrhy uživatelského rozhraní, kde potřebuji vybrat více položek a nyní nemusím používat dva objemné seznamy dostupných a vybraných položek.

Nastavení HTML

<div class="w2ui-label"> Multi-Select: </div>
<div class="w2ui-field"> <input id="enum"> </div>
<div class="w2ui-label"> Max 2 Items: </div>
<div class="w2ui-field"> <input id="enum-max"> </div>
<div class="w2ui-label"> Custom: </div>
<div class="w2ui-field"> <input id="enum-custom"> </div>

Stejně jako rozbalovací seznam přichází s plnou podporou klávesnice a spoustou možností konfigurace (ještě více než rozbalovací seznam). Doufám, že se vám to bude líbit stejně jako mně v průběhu několika posledních let.

Vytvoření interaktivních polí

var pstyle = 'padding-right: 3px; color: #828AA7; text-shadow: 1px 1px 3px white;';
var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', ...];
$('#enum').w2field('enum', { 
	items: people,
	selected: [{ id: 0, text: 'John Adams' }, { id: 0, text: 'Thomas Jefferson' }]
});
$('#enum-max').w2field('enum', { 
	items: people, 
	max: 2 
});
$('#enum-custom').w2field('enum', { 
	items: people, 
	onAdd: function (event) {
		if (Math.random() > 0.8) {
			event.item.bgColor = 'rgb(255, 232, 232)';
			event.item.border  = '1px solid red';
		}
	},
	itemRender: function (item, index, remove) {
		var html =  
			'<li style="'+ (item.bgColor ? 'background-color: '+ item.bgColor + ';' : '') +
				(item.border ? 'border: '+ item.border + ';' : '') +'" index="'+ index +'">'+
				remove +
				'<span class="fa-trophy" style="'+ pstyle +'; margin-left: -4px;"></span>' + 
				item.text +
			'</li>';
		return html;
	},
	render: function (item, options) {
		return '<span class="fa-star" style="'+ pstyle +'"></span>' + item.text;
	}
});
// if you need to get to the selected items, use:
// $('#id').data('selected');

Možnosti pro ENUM

options = {
	items       : [],
	selected    : [],
	placeholder : '',
	max         : 0,            // max number of selected items, 0 - unlim
	url         : null,         // not implemented
	cacheMax    : 500,
	maxWidth    : null,         // max width for input control to grow
	maxHeight   : 350,          // max height for input control to grow
	match       : 'contains',   // ['contains', 'is', 'begins with', 'ends with']
	silent      : true,
	showAll     : false,        // weather to apply filter or not when typing
	markSearch  : true,
	render      : null,         // render function for drop down item
	itemRender  : null,         // render selected item
	itemsHeight : 350,          // max height for the control to grow
	itemMaxWidth: 250,          // max width for a single item
	onSearch    : null,         // when search needs to be performed
	onRequest   : null,         // when request is submitted
	onLoad      : null,         // when data is received
	onClick     : null,         // when an item is clicked
	onAdd       : null,         // when an item is added
	onRemove    : null,         // when an item is removed
	onMouseOver : null,         // when an item is mouse over
	onMouseOut  : null          // when an item is mouse out
};

Nahrání souboru

Knihovna ovládacích prvků by samozřejmě nebyla kompletní bez nástroje pro nahrávání souborů. Použil jsem HTML5 FileReader API (nebude fungovat ve starých prohlížečích, včetně IE9) ke čtení souboru, jeho zakódování do base64 a poskytnutí vám jako proměnné, kterou můžete odeslat s jakýmkoli požadavkem AJAX.

<div class="w2ui-label"> Attach Files: </div>
<div class="w2ui-field"> <input id="file"> </div>

Tento přístup je pro mě nový, ale docela se mi líbí. Zjednodušuje mi to nahrávání souborů, i když má určitá omezení. Největší, kterou jsem zatím našel, je omezení velikosti souboru (pomalé u souborů nad 50 MB), nicméně je srovnatelné s přílohami e-mailů, které jsou ve skutečnosti také zakódovány do těla e-mailu v base64.

Pozitivní je, že jakmile soubor zakódujete do base64, můžete použít datové url API k jeho náhledu (pokud se jedná o obrázek) nebo k změně jeho velikosti před odesláním na server pomocí triku HTML5 canvas.

JavaScript

$('#file').w2field('file', {});
// if you need to get to the selected files, use:
// $('#file').data('selected');

Možnosti pro soubor

options = {
	selected     : [],
	placeholder  : 'Attach files by dragging and dropping or Click to Select',
	max          : 0,
	maxSize      : 0,        // max size of all files, 0 - unlim
	maxFileSize  : 0,        // max size of a single file, 0 -unlim
	maxWidth     : null,     // max width for input control to grow
	maxHeight    : 350,      // max height for input control to grow
	silent       : true,
	itemRender   : null,     // render selected item
	itemMaxWidth : 250,      // max width for a single item
	itemsHeight  : 350,      // max height for the control to grow
	onClick      : null,     // when an item is clicked
	onAdd        : null,     // when an item is added
	onRemove     : null,     // when an item is removed
	onMouseOver  : null,     // when an item is mouse over
	onMouseOut   : null      // when an item is mouse out
}

Stáhnout

Všechny tyto ovládací prvky jsou součástí W2UI 1.4 (které je právě nyní v rané beta verzi). Pro vaše pohodlí jsem sestavil malý balíček ke stažení se soubory, které potřebujete:

Stáhnout w2ui

Abyste jej mohli používat, budete muset do své aplikace nebo jejích miniifikovaných protějšků zahrnout w2ui-fields-1.0.js a w2ui-fields-1.0.css. Pokud jde o velikost souboru, je pouze 18 Kb pro soubor JS a 6 Kb pro CSS (minifikovaný a gzipovaný) a má pouze jednu závislost - jQuery.

Tweet pro kód #2

Tweet pro kód #1

• Najděte nejbližší záznamy v MongoDB k souřadnicím

• Odesílejte data z javascriptu do databáze mysql

• Pokud v poli nastavím pouze vysoký index, plýtvá to pamětí?

• Highcharts předávají externí proměnné globálním možnostem

• Nastavení proměnné v Google Scriptech na základě jiné proměnné

• Přepínání mezi objednávkou PayPal a předplatným PayPal