Skip to content

Instantly share code, notes, and snippets.

@gerhardberger

gerhardberger/jQuery inputMerge

Created April 8, 2012 13:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gerhardberger/2337331 to your computer and use it in GitHub Desktop.
Save gerhardberger/2337331 to your computer and use it in GitHub Desktop.
Download ZIP
Merging inputs.
Raw
jQuery inputMerge
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Input Merge</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
!function($) {
$.fn.inputMerge = function() {
for (var i = 0; i < this.length-1; i++)
$(this[i]).data('next', this[i+1])
for (var i = 1; i < this.length; i++)
$(this[i]).data('prev', this[i-1])
$(this).keydown(function(event) {
if (event.which == 8) {
if (this.value.length == 0)
$($(this).data('prev')).focus()
}
else {
if ($(this).attr('maxlength') == this.value.length)
$($(this).data('next')).focus()
}
})
}
}(jQuery)
</script>
</head>
<body>
Tel.:
<input type="text" maxlength="3" size="3" id="fst" />
<input type="text" maxlength="2" size="2" id="snd" />
<input type="text" maxlength="3" size="3" id="thd" />
<input type="text" maxlength="4" size="4" id="fth" />
<script type="text/javascript">
$('#fst, #snd, #thd, #fth').inputMerge()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment