Malleus' Javascript FAQ

**Malleus** · 01.04.2006 00:21

Hi Steffen,
stimmt! Du hast Recht, funktionierte nur mit Opera, hab's abgeändert:

Test

Code:

function check4Digits(evt)
{
	var keyCode = evt.keyCode || evt.which;
	if ( keyCode )
	{
		if ( ( keyCode >= 48 && keyCode <= 57 ) || keyCode == 8 ||
			 ( keyCode >= 96 && keyCode <=106 )
		   )
			return true;	
	};
	
	if ( evt.preventDefault )
		evt.preventDefault();
	else evt.returnValue = false;
	
	return false;
};

tschau

Frank

**steffenk** · 06.04.2006 00:29

habs nochmal geändert:

Code:

function check4Digits(evt)
{
	var keyCode = evt.keyCode || evt.which;
	if ( keyCode )
	{
		if ( ( keyCode >= 48 && keyCode <= 57 ) || keyCode < 32 ||
			 ( keyCode >= 96 && keyCode <=106 )
		   )
			return true;	
	};
	
	if ( evt.preventDefault )
		evt.preventDefault();
	else evt.returnValue = false;
	
	return false;
};

damit auch tab etc. noch nutzbar bleibt

**Malleus** · 06.04.2006 22:22

Hi Steffen,
ich hab' auch noch einen Fehler bemerkt: Opera wertet den keyCode 96 als "a" aus, hab's daher angepaßt. Des Weiteren setze ich jetzt den Event-Handler "dynamisch" beim "onload" der Seite, d.h. alles INPUT-Elemente der Klasse "numericInteger" werden jetzt validiert:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Malleus' Javascript FAQ: Zahlenvalidierung, Konvertierung nach Hexadezimal</title>
<script type="text/javascript">
function initPage()
{
	oMyNumber = document.getElementById( "myNumber" );
	oMyNumber.focus();

	initNumericValidate();

};

function initNumericValidate()
{
	var inputs = document.getElementsByTagName( "INPUT" );
	for (var i = 0; i < inputs.length; i++ )
	{
		var className = inputs[ i ].className;

		if ( className.indexOf( "numeric" ) != -1 )
		{
			inputs[ i ].onkeypress = check4Digits;
			inputs[ i ].onkeydown = check4Digits;
		}
	};
};



function check4Digits( evt )
{
	if ( !evt )
		evt = window.event;

	var keyCode = evt.which || evt.keyCode;

	function isBetween( startKeyCode, endKeyCode )
	{
		return ( keyCode >= startKeyCode && keyCode <= endKeyCode )
	};

	if ( keyCode )
	{
		if ( keyCode < 32 )
		{
			return true;
		};

		if ( isBetween(48,57) || isBetween( 96, 105 ) )
		{
			if ( !( window.opera && keyCode > 96 && evt.type == "keypress" ) )
				return true;
		};
	};

	if ( evt.preventDefault )
		evt.preventDefault();
	else evt.returnValue = false;

	return false;
};

function doIt()
{
	alert( Number( oMyNumber.value ).toString( 16 ) );
	oMyNumber.focus();
	oMyNumber.select();
};
</script>

<style type="text/css">

</style>

</head>

<body onload="initPage()">
Zahl mit "0" Nachkommastellen:&nbsp;<input class="numericInteger" type="text" id="myNumber"/>&nbsp;<button onclick="doIt()">Hexadezimal</button>

<div id="myDiv">

</div>

</body>
</html>

Test

Javascript FAQ

tschau

Frank

**steffenk** · 07.04.2006 00:41

was man alles bedenken muss

Danke Frank !

**Stuck Mojo** · 08.04.2006 23:50

soweit ich mich errinere sind die keycodes von eventhandler zu eventhandler unterschiedlich. Ich hatte daher für soetwas nur onkeypress genutzt, da dies der einzige eventhandler war/(ist?) der den korrekten keycode (wenn man es mit der tastatureingabe vergleicht) zurück gibt.

Wie immer gibt es mehrere Wege die zum Ziel führen... hier meiner:

Code:

<script>
function onlyNumeric(e) {
    e = e || event;
    var cc = e.which || e.keyCode;
    var c = String.fromCharCode(cc);
    
    var res = c.match(/\d/);
    
    if (res) 
        return true;
        
    if (e.preventDefault)
        e.preventDefault();
    else
        e.returnValue = false;
}
</script>
<input type="text" onkeypress="onlyNumeric(event);" />

...habs nur im IE und FF getestet. Opera wäre also noch interresant

Gruss
Jan

**Stuck Mojo** · 08.04.2006 23:51

revidiere meine Lösung gleich wieder, da sie zu strikt ist... navigieren und soweiter funzt damit natürlich auch nicht mehr *grin*

**Stuck Mojo** · 09.04.2006 00:15

so ists etwas besser... allerdings noch nicht wirklich final

Code:

function onlyNumeric(e) {
    e = e || event;
    var cc = e.which || e.keyCode;
    var crtl = e.ctrlKey || e.modifiers & e.CONTROL_MASK;
    
    if (
        cc >= 37 && cc <= 40 /* Pfeiltasten */
        || cc == 8 /* Backspace */ 
        || cc == 46 /* entf */        
        || cc == 120 && crtl /* STRG+X */
        || cc == 99 && crtl /* STRG+C */
    )   
        return true;
        
    var c = String.fromCharCode(cc);
    
    var res = c.match(/\d/);
    
    if (res) 
        return true;
        
    if ( e.preventDefault )
		e.preventDefault();
	else e.returnValue = false;
}

Gruss
Jan

**Malleus** · 09.04.2006 00:50

Hi Jan,
bei Deiner neuen Version geht unter MSIE und FF der Nummernblock nicht. Opera arbeitet einwandfrei! ...hatte das gleiche Problem in meiner ersten Fassung ;-)

Tschau

Frank

**steffenk** · 09.04.2006 12:33

um das mal zu überprüfen, habe ich ein Testscript erstellt:

Code:

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function check(evt,when)
{
	var keyCode = evt.keyCode || evt.which;
	var o = document.getElementById('out');
	o.innerHTML += when + ": " + keyCode + "&nbsp;&nbsp;";
	if(when=='keyUp') o.innerHTML += '<br>';
};
</script>
</head>
<body onload="document.getElementById('input').focus();">
<input type="text" size="30" onkeydown="check(event,'keyDown');" onkeypress="check(event,'keyPress');" onkeyup="check(event,'keyUp');" id="input">
<br><h3>Ereignisse:</h3>
<div id="out"></div>
</body>
</html>

Also die events keyDown und keyUp sind immer identisch, nur keyPress liefert einen anderen Wert.
Wieso ?

**Stuck Mojo** · 10.04.2006 10:30

Zitat von Malleus

Hi Jan,
bei Deiner neuen Version geht unter MSIE und FF der Nummernblock nicht. Opera arbeitet einwandfrei! ...hatte das gleiche Problem in meiner ersten Fassung ;-)

Tschau

Frank

läuft bei mir super. Evtl. hast du immernoch nen falschen event-handler benutzt? Keypress liefert für den korrekten Keycode.

Gruss
Jan

**Malleus** · 11.04.2006 22:20

Hi Jan,
stimmt, ich hab' onkeydown benutzt ! Sachen gibt's, schon seltsam.

Ich hab' meine Version auch nochmal upgedatet;

Damit funktioniert es jetzt auch:

Code:

	if ( keyCode < 32 )
			return true;
		
		if ( !isNaN( String.fromCharCode( keyCode ) ) )
			return true;
	}

Hier ist der ganze Quelltext: test

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>Malleus' Javascript FAQ: Zahlenvalidierung, Konvertierung nach Hexadezimal</title>
<script type="text/javascript">
function initPage()
{
	oMyNumber = document.getElementById( "myNumber" );
	oMyNumber.focus();
	
	initNumericValidate();
	
};

function initNumericValidate()
{
	var inputs = document.getElementsByTagName( "INPUT" );
	for (var i = 0; i < inputs.length; i++ )
		if ( inputs[ i ].className.indexOf( "numeric" ) != -1 )
			inputs[ i ].onkeypress = check4Digits;
};



function check4Digits( evt )
{
	if ( !evt ) 
		evt = window.event;
		
	var keyCode = evt.which || evt.keyCode;
	
	if ( keyCode )
	{
		if ( keyCode < 32 )
			return true;
		
		if ( !isNaN( String.fromCharCode( keyCode ) ) )
			return true;
	};
		
	if ( evt.preventDefault )
		evt.preventDefault();
	else  evt.returnValue = false;
	
	return false;
};

function doIt()
{
	alert( Number( oMyNumber.value ).toString( 16 ) );
	oMyNumber.focus();
	oMyNumber.select();
};
</script>

<style type="text/css">

</style>

</head>

<body onload="initPage()">
Zahl mit "0" Nachkommastellen:&nbsp;<input class="numericInteger" type="text" id="myNumber"/>&nbsp;<button onclick="doIt()">Hexadezimal</button>

<div id="myDiv">

</div>

</body>
</html>

tschau
Frank

**Stuck Mojo** · 12.04.2006 01:23

ja super, noch kürzer

Fängst du mit 'if ( keyCode < 32 )' die cursor usw ab? Wieso hatte ich da andere keyCodes...? *grübel*

Zur Info: Die Leertaste wird auch (noch) zugelassen.

Der nächste Schritt wäre eine Art Mask. Also z.B. ####,## zahlen und genau 1 Komma mit 2 darauf folgenden zahlen wobei das Komma und die Nachkommastellen optional sind

Ich habe irgendwo eine Lösung für den IE rumschwirren, würde mich mal interresieren ob das auch in anderen Browsern möglich ist. Wer ne Idee?

Gruss
Jan

**steffenk** · 12.04.2006 02:01

die Leertaste bekommt man so weg:

Code:

if (keyCode!=32 && !isNaN( String.fromCharCode( keyCode ) ) )

**Angelmaker** · 16.02.2009 15:09

Nach stundenlangem RUmbrowsen mit dutzenden von Fragezeichen über dem Kopf stosse ich dann auf diese Schatzkiste. Direkt ein benötigtes Codebeispiel gefunden für dynamische Dropdown menus - flexibel, leicht anpaßbar - genial.

Danke Malleus, großartige Arbeit.

*einen Schrein für Malleus erricht`*

zur Startseite vom TP

Thema: Malleus' Javascript FAQ

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Aktive Benutzer

Aktive Benutzer