javascriptjqueryhtmlcssdrupal

Initials field in HTML form,

For a project i need a initial textfield which use the every first letter of a forname and bornnames. So basically the field needs to autoformat the input by user. If i fill in my initials MGJ it needs to be M.G.J. (after every letter he must put in the point).

Be aware; The webform made with Webform module Drupal, so i only could use css or Javascript.

Are there some easy option for that?

Regards, Martijn

Solution

  • http://nosir.github.io/cleave.js/ you can use this library to format your input the easy way.

    Or you can do it like this in JS

    var input = document.querySelector('#initials');
input.addEventListener('focusout', function() {
  this.value = this.value.split('').join('.');
})
    <input type="text" id="initials" />