TP: Malleus' Javascript FAQ - Seite 2 - TP Hilfe Forum -- Anleitung - Tutorial

Malleus · 31.03.2006, 23: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 · 05.04.2006, 23: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, 21: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 · 06.04.2006, 23:41

was man alles bedenken muss

Danke Frank !

Stuck Mojo · 08.04.2006, 22: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, 22: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 · 08.04.2006, 23: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 · 08.04.2006, 23: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, 11: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, 09:30

Zitat:

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, 21: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, 00: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, 01:01

die Leertaste bekommt man so weg:

Code:

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

Angelmaker · 16.02.2009, 14: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`*