JSFiddle - React, Tailwind, and code Playground

HTML

<input class="sample" type="text">

JavaScript

let sample = document.querySelectorAll('.sample');

// apply events for every field in a class
for (let i = 0; i < sample.length; i++) {
	sample[i].addEventListener('input', notDef);
}

// replace unacceptable characters with .notdef glyph
function notDef() {
	let elem = this;
	if (elem.value.match(/[^a-zA-Z\'\s]/)) {
		let sel = elem.selectionStart;
		elem.value = elem.value.replace(/[^a-zA-Z\'\s]/g, '�');
		elem.setSelectionRange(sel, sel);
	}
}