Detect user typed into textbox

[ellescuba27]

Here is a script that can detect when a user types text into a textbox. Unlike onChange, this fires immediatley after a keystroke. It ended up being a lot more advanced than I thought it would be, but nevertheless, here it is! You must put this at the END of your page, wrapped in <script> tags with the LANGUAGE attribute set to "Javascript". It uses mutation events so it might not work on older browsers.

var targ = null;
var targnum = 0;
var type = 0;
var whichone = null;
var getelementsbytagnametextboxes = document.getElementsByTagName("input");
function focusdetect(e) {
if (!e) {
e = window.event;
}
if (e.target) {
targ = e.target;
} else {
if (e.srcElement) {
targ = e.srcElement;
} else {
if (targ.nodeType == 3) {
targ = targ.parentNode;
}
}
}
getelementsbytagnametextboxes = document.getElementsByTagName("input");
for (i=0;i<=getelementsbytagnametextboxes.length-1;i++) {
if (getelementsbytagnametextboxes[i].type == "text") {
if (getelementsbytagnametextboxes[i] == targ) {
targnum = i;
type = 0;
}
}
}
getelementsbytagnametextboxes = document.getElementsByTagName("textarea");
for (i=0;i<=getelementsbytagnametextboxes.length-1;i++) {
if (getelementsbytagnametextboxes[i] == targ) {
targnum = i;
type = 1;
}
}
whichone = targnum;
}
function blurdetect() {
whichone = null;
}
function DOMchangedetect() {
getelementsbytagnametextboxes = document.getElementsByTagName("input");
for (i=0;i<=getelementsbytagnametextboxes.length-1;i++) {
if (getelementsbytagnametextboxes[i].type == "text") {
getelementsbytagnametextboxes[i].onfocus = focusdetect;
getelementsbytagnametextboxes[i].onblur = blurdetect;
}
}
getelementsbytagnametextboxes = document.getElementsByTagName("textarea");
for (i=0;i<=getelementsbytagnametextboxes.length-1;i++) {
getelementsbytagnametextboxes[i].onfocus = focusdetect;
getelementsbytagnametextboxes[i].onblur = blurdetect;
}
}
DOMchangedetect();
document.addEventListener("DOMNodeInserted", DOMchangedetect, false);
function typechangedetect() {
if (whichone != null) {
window.alert("You typed in textbox " + whichone + " type " + type);
// replace this alert with the code you want to do when the user types into the textbox. Note that the whichone variable contains which textbox the user typed into and type contains 0 or 1... input type="text" or textarea.
}
}
function otherchangedetect(e) {
if (!e) {
e = window.event;
}
if (e.target) {
targ = e.target;
} else {
if (e.srcElement) {
targ = e.srcElement;
} else {
if (targ.nodeType == 3) {
targ = targ.parentNode;
}
}
}
getelementsbytagnametextboxes = document.getElementsByTagName("input");
for (i=0;i<=getelementsbytagnametextboxes.length-1;i++) {
if (getelementsbytagnametextboxes[i].type == "text") {
if (getelementsbytagnametextboxes[i] == targ) {
targnum = i;
type = 0;
}
}
}
getelementsbytagnametextboxes = document.getElementsByTagName("textarea");
for (i=0;i<=getelementsbytagnametextboxes.length-1;i++) {
if (getelementsbytagnametextboxes[i] == targ) {
targnum = i;
type = 1;
}
}
window.alert("You typed in textbox " + targnum + " type " + type);
// replace this alert with the code you want to do when the user types into the textbox. Note that the targnum variable contains which textbox the user typed into and type contains 0 or 1... input type="text" or textarea.
}
document.onkeyup = typechangedetect;
document.oncut = otherchangedetect;
document.onpaste = otherchangedetect;

To use it, just find where it says

// replace this alert with the code you want to do when the user types into the textbox. Note that the whichone variable contains which textbox the user typed into and type contains 0 or 1... input type="text" or textarea.

and

// replace this alert with the code you want to do when the user types into the textbox. Note that the targnum variable contains which textbox the user typed into and type contains 0 or 1... input type="text" or textarea.

and follow the instructions.

Feel free to use it for whatever purpose you want! If you edit it though, you don't have to, but why don't you post it back here for all to see?

 

[misson]

The language attribute is deprecated in HTML4, and absent in HTML5. The correct attribute would be "type", set to (for now) "text/javascript".

 

[ellescuba27]

That's good to know. Why did they change it?

 

[misson]

The language attribute was never a part of any HTML standard (it's not mentioned in HTML 3.2 and deprecated in the first version of HTML4, back in 1997), so the W3C didn't really change anything. I believe "language" was originally a proprietary attribute introduced by IE 4.

The W3C doesn't have an official publication of the reasons behind the decisions made for standards. Most likely they deprecated "language" in favor of "type" as the value of the former was created ad-hoc, while "type" is based on MIME. There might be something in the HTML mailing list archives, if you really want to find out.

Wherever you learned about embedding JS in HTML, it fed you very outdated information. (Was it W3Schools, by any chance?) Consider everything you learned there tainted, and find a more authoritative source. You can't get more authoritative than the W3C.

 

[essellar]

The language attribute was actually Netscape's fault—there were some major compatibility problems between the first few versions of JS, and the bindings needed for feature-sniffing weren't exposed at the time. IIRC, it was introduced in a dot-version of NSN 2, or perhaps in the base version of NSN 3. MS just noticed that VBScript fits between quotation marks as neatly as JavaScript 1.1 does, took that ball, and ran with it. Since Navigator was using an enumeration to decide whether and how to parse, it would just ignore the IE-only script. And there began a decade of developer hell. I can't say that I miss it.

 

[ellescuba27]

It was not W3Schools, it was Sams Teach Yourself Javascript 1.5 . I bit outdated now I guess.