JSFiddle - React, Tailwind, and code Playground
HTML
<form id="mmd-support-form" action="">
<input name="test" value="" placeholder="focus me"/>
<div style="display:none;" id="message_test"><p>lorem ipsum dolor</p></div>
</form>
JavaScript
var IndexCheckValues = (function ( $, undefined ) {
var _ = {
forbiddenKeys : [
9, 16, 13, 38, 40
]
};
return {
timeout : null,
form : '#mmd-support-form',
onReady : function () {
this.element = $( this.form );
this.bind();
console.log(this.element)
},
bind : function () {
var el = this.element,
that = this;
el.find( 'input, textarea, select' )
.on( 'focus', function ( ev ) {
var $this = $( this );
$( '#message_'+ this.name ).show();
console.log($( '#message_'+ this.name ))
that.highlight( $this )
.bindOnce( $this )
});
},
bindOnce : function ( el ) {
el = el || $();
var that = this;
el.one( 'keyup', function( ev ) {
if( $.inArray( ev.which, _.forbiddenKeys ) === -1) {
return;
}
var $this = $( this );
ev.preventDefault();
that.timeout = setTimeout(function () {
doPost( this.name );
}, 3000);
$( '#message_'+ $this.attr( 'name' ) )
.removeAttr("class")
.addClass('mmd-divmessage-proof')
.text('LOADING');
})
.one( 'keydown', function()...