Custom HTML elements

July 19th, 2012 | 3 min read | HTML5, JavaScript, jQuery, Web

Soms kan het voorkomen dat je een eigen/custom HTML element wilt maken met bepaalde extra logica en dat deze niet beschikbaar is. Nou, in dit voorbeeld ga ik een bankrekening-control maken op basis van BBAN of Belgian Bank Account Number). In dit voorbeeld ga ik enkel gebruik maken van HTML5 en jQuery, maar uiteraard kan je hier zo ver in gaan als je zelf wilt en kan je je eigen CSS gebruiken enzovoorts.

File: index.html

<html>
<head>
	<script type="text/javascript" src="assets/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="assets/js/bank-element.js"></script>
</head>
<body>
	<input type="banknr" placeholder="000-0000000-00" name="bankrekening" />
</body>
</html>

Zoals je hier kan zien staat er maar één control van het type banknr, met een placeholder (HTML5) en een name-attribuut. Ik ga hiervan 3 afzonderlijke tekstvelden maken, de placeholder omzetten en ook de events forwarden. Hiervoor gebruik ik de volgende JavaScript code:

File: assets/js/bank-element/js

$(function() {
	$('input[type="banknr"]').each(function() {
		var name = $(this).attr('name');
		var placeholder = $(this).attr('placeholder').split('-');
		$(this).after('<div style="width: ' + $(this).width() + 'px"><input type="text" placeholder="' + placeholder[0] + '" name="' + name + '_1" style="width: 21%" maxlength="3" />-<input type="text" placeholder="' + placeholder[1] + '" name="' + name + '_2" style="width: 50%" maxlength="7" />-<input type="text" placeholder="' + placeholder[2] + '" name="' + name + '_3" style="width: 14%" maxlength="2" /></div>');
		$(this).hide();
	});
	$('input[name$="_1"]').bind('keypress', function(event) {
		allowNumeric($(this), event);
	});
	$('input[name$="_2"]').bind('keypress', function(event) {
		allowNumeric($(this), event);
	});
	$('input[name$="_3"]').bind('keypress', function(event) {
		allowNumeric($(this), event);
	});
});

var allowNumeric = function(sender, event) {
	var change = 0;
	var parts = sender.attr("name").split("_");
	var parent = $('input[name="' + parts[0] + '"]');
	if (event.keyCode > 57) {
		event.preventDefault();
	} else {
		parent.val(parent.val() + String.fromCharCode(event.which));
		parent.trigger('change');
	}

	if (event.keyCode > 47 && event.keyCode <= 57 && sender.attr("maxlength") == sender.val().length) {
		change = 1;
	} if (event.keyCode == 8 && sender.val().length == 0) {
		change = -1;
	} if (change != 0) {
		parts[1] = parseInt(parts[1]) + change;
		if (parts[1] < 4 && parts[1] > 0) {
			$('input[name="' + parts.join("_") + '"]').focus();
		}
	}
};

Helemaal bovenaan deze JavaScript code ga ik de banknr-controls omzetten door 3 nieuwe tekstvelden aan te maken en het oorspronkelijk veld te verbergen.
Vlak daaronder maak ik gebruik van het keyPress event om de hele boel werkende te houden. De keypress zorgt er in eerste instantie voor dat het onmogelijk wordt om letters in te voeren, maar daarnaast zal het er ook voor zorgen dat indien het aantal cijfers dat nodig is bereikt is, het volgende deel gefocust wordt.

Ten slotte zorgt ditzelfde event er ook voor dat de uitvoer ook in het oorspronkelijk veld terecht komt en dat het change event getriggerd wordt. Dit is eigenlijk een zeer tijdelijke/lelijke oplossing, want eigenlijk zouden we beter alle events manueel gaan doorsturen, maar dit kost teveel werk.

Het voordeel is wel dat je nu ook custom events kan schrijven die bijvoorbeeld getriggerd worden als er een geldig rekeningnummer wordt ingevoerd of niet.

Download project

Download – custom-html-elements.tar.gz (110 kB)

Back to tutorialsContact me on TwitterDiscuss on Twitter

Profile picture

Dimitri "g00glen00b" Mestdagh is a consultant at Cronos and tech lead at Aquafin. Usually you can find him trying out new libraries and technologies. Loves both Java and JavaScript.