Hehe ... kom ligetil at lege lidt videre, så den skal du da også have:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
font: 0.85em verdana, tahoma, sans-serif;
}
.bar {
position: relative;
}
.bar .inp {
position: absolute;
background: transparent;
font: 12px verdana, tahoma, sans-serif;
}
.bar img {
position: absolute;
width: 0;
height: 22px;
left: 0;
top: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
function checkChars(oInp,e) {
var xAllowed = /^(.*?)([^a-z0-9_-]+)(.*?)/i;
if (!checkChars.testSpan) {
checkChars.testSpan = document.createElement("span");
oInp.parentNode.appendChild(checkChars.testSpan);
checkChars.testSpan.appendChild(document.createTextNode("-"));
checkChars.testSpan.className = oInp.className;
checkChars.testSpan.style.padding = 0;
checkChars.testSpan.style.visibility = "hidden";
}
var css = oInp.parentNode.getElementsByTagName("img")[0].style;
if (xAllowed.test(oInp.value)) {
checkChars.testSpan.firstChild.nodeValue = RegExp.$1;
css.left = (checkChars.testSpan.offsetWidth+2) + "px";
var nMax = oInp.offsetWidth-(checkChars.testSpan.offsetWidth+4);
checkChars.testSpan.firstChild.nodeValue = RegExp.$2.replace(/ /g,"\u00a0");
var nW = checkChars.testSpan.offsetWidth;
css.width = (nW>nMax?nMax:nW) + "px";
css.height = oInp.offsetHeight + "px";
if (e.keyCode!=8) {
alert("Du har brugt et ulovligt tegn");
oInp.focus();
return false;
}
} else {
css.left = 0;
css.width = 0;
}
}
</script>
<p>Prøv at skrive nogle lovlige tegn og derefter et ulovligt.</p>
<p>Lovlige tegn er <b>a-z</b> (store og små), <b>0-9</b>,<br>
samt <b>bindestreg</b> og <b>underscore</b></p>
<p>
<span class="bar">
<img src="bg_red.png" alt="">
<input class="inp" type="text" onkeyup="checkChars(this,event)">
</span>
</p>
</body>
</html>
