Javascript – Check length of field as user types

javascriptjquerylivevalidation

I have seen this ability over the web and I wasn't quite sure how to search for it, a good example is sending a text message it will say as you are typing:

132/160 – and the 132 counter will increase until you hit your limit.

My question was is it possible to get working with javascript alone, no jQuery library? However if I have to use jQuery I will, perhaps a point to a good tutorial, or maybe it's simpler than that, or even some terms to search for it, Thanks.

Best Answer

Use the oninput event, where supported (all modern browsers, IE 9 and later) and onpropertychange for older Internet Explorers:

var myInput = document.getElementById("myInput");
if ("onpropertychange" in myInput && !("oninput" in myInput)) {
    myInput.onpropertychange = function () { 
        if (event.propertyName == "value")
            inputChanged.call(this, event);
    }
}
else
    myInput.oninput = inputChanged;

function inputChanged () {
    // Check the length here, e.g. this.value.length
}

onkeyup is not a suitable event for handling input, as there is a notable delay between the user entering text and your code noticing the change. A user could even hold the key down (for repeating text on Windows devices), but your code would not handle it.

Related Solutions

Javascript – Length of a JavaScript object

The most robust answer (i.e. that captures the intent of what you're trying to do while causing the fewest bugs) would be:

Object.size = function(obj) {
  var size = 0,
    key;
  for (key in obj) {
    if (obj.hasOwnProperty(key)) size++;
  }
  return size;
};

// Get the size of an object
const myObj = {}
var size = Object.size(myObj);

There's a sort of convention in JavaScript that you don't add things to Object.prototype, because it can break enumerations in various libraries. Adding methods to Object is usually safe, though.

Here's an update as of 2016 and widespread deployment of ES5 and beyond. For IE9+ and all other modern ES5+ capable browsers, you can use Object.keys() so the above code just becomes:

var size = Object.keys(myObj).length;

This doesn't have to modify any existing prototype since Object.keys() is now built-in.

Edit: Objects can have symbolic properties that can not be returned via Object.key method. So the answer would be incomplete without mentioning them.

Symbol type was added to the language to create unique identifiers for object properties. The main benefit of the Symbol type is the prevention of overwrites.

Object.keys or Object.getOwnPropertyNames does not work for symbolic properties. To return them you need to use Object.getOwnPropertySymbols.

var person = {
  [Symbol('name')]: 'John Doe',
  [Symbol('age')]: 33,
  "occupation": "Programmer"
};

const propOwn = Object.getOwnPropertyNames(person);
console.log(propOwn.length); // 1

let propSymb = Object.getOwnPropertySymbols(person);
console.log(propSymb.length); // 2

Javascript – How to check for an empty/undefined/null string in JavaScript

If you just want to check whether there's a truthy value, you can do:

if (strValue) {
    //do something
}

If you need to check specifically for an empty string over null, I would think checking against "" is your best bet, using the === operator (so that you know that it is, in fact, a string you're comparing against).

if (strValue === "") {
    //...
}

Best Answer

Related Solutions

Javascript – Length of a JavaScript object

Javascript – How to check for an empty/undefined/null string in JavaScript

Related Topic