jQuery toggleClass example

Toggle class name on click in jQuery

by madroller

HTML

<input class="c0190 c0198 input" id="message_text_input" autocomplete="off" data-ta-locator="ChatTools__ChatInputText" type="text" value="">

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

function simulateKey (keyCode, type, modifiers) {
	var TextField = document.getElementById("message_text_input");
	var evtName = (typeof(type) === "string") ? "key" + type : "keydown";	
	var modifier = (typeof(modifiers) === "object") ? modifier : {};

	var event = document.createEvent("HTMLEvents");
	event.initEvent(evtName, true, false);
	event.keyCode = keyCode;
	
	for (var i in modifiers) {
		event[i] = modifiers[i];
	}

	TextField.dispatchEvent(event);
}

// Setup some tests

var onKeyEvent = function (event) {
	var state = "pressed";
	
	if (event.type !== "keypress") {
		state = event.type.replace("key", "");
	}
	
	console.log("Key with keyCode " + event.keyCode + " is " + state);
};
var TField = document.getElementById("message_text_input");
TField.addEventListener("keypress", onKeyEvent, false);
//TField.addEventListener("keydown", onKeyEvent, false);
//TField.addEventListener("keyup", onKeyEvent, false);

TField.focus();
simulateKey(65);
TField.value=TField.value+'a';
simulateKey(65, "up");
simulateKey(97, "press");
simulateKey(83);
TField.value=TField.value+'s';
simulateKey(83, "up");
simulateKey(115, "press");
simulateKey(68);
TField.value=TField.value+'d';
simulateKey(68, "up");
simulateKey(100, "press");



//simulateKey(45, "press");