<html>
<head>
<title>Textarea Onkeyup Alternative to Pattern Attribute - RJM Programming - November, 2024</title>
<script type=text/javascript>

var disallowed=[], onlyallowed=[];
var val='', opl=' ', otl=' ', wrp='', oothis=null;

function disallow(what) {
disallowed=what.value.split('');
}

function onlyallow(what) {
onlyallowed=what.value.split('');
}

function patternfix(othis) {
var itv=0, jtv=0, kok=false;
if (opl == ' ') { otl=('' + othis.title); opl=('' + othis.placeholder); othis.ondblclick=function(event){ var etp=event.target.placeholder; if (opl.trim() != '') { etp=etp.replace(opl,''); } if (('' + etp).trim() != '') { event.target.value=event.target.placeholder; } }; }
if (othis.value == '' || eval('' + disallowed.length) == 0 && eval('' + onlyallowed.length) == 0) { return othis.value; }
var thisval=othis.value;
tvs=thisval.split('');
var tval=thisval;
if (eval('' + disallowed.length) > 0) {
tval='';
for (itv=0; itv<tvs.length; itv++) {
//alert(tvs[itv]);
kok=true;
for (jtv=0; jtv<disallowed.length; jtv++) {
//alert(tvs[itv] + ' vs ' + disallowed[jtv]);
if (disallowed[jtv] == tvs[itv]) { kok=false; }
}
if (kok || tvs[itv] == String.fromCharCode(10)) { tval+=tvs[itv]; }
}
}
tvs=tval.split('');
if (eval('' + onlyallowed.length) > 0) {
tval='';
for (itv=0; itv<tvs.length; itv++) {
kok=false;
for (jtv=0; jtv<onlyallowed.length; jtv++) {
if (onlyallowed[jtv] == tvs[itv]) { kok=true; }
}
if (kok || tvs[itv] == String.fromCharCode(10)) { tval+=tvs[itv]; }
}
}
return tval;
}

function usepattern(othis) {
var retval=true, retv=-1, retvfull=-1, withinregexp='', newstr=' ', valr=[], jval=0, rval='', othisplaceholder='', opdelim='';
var prows=eval('' + othis.value.split(String.fromCharCode(10)).length);
prows++;
if (('' + othis.rows) != ('' + prows)) {
othis.rows=('' + prows);
}
//alert('1 ' + othis.onblur + ' ... ' + othis.onlosefocus);
if (opl == ' ') { otl=('' + othis.title); opl=('' + othis.placeholder); othis.ondblclick=function(event){ var etp=event.target.placeholder; if (opl.trim() != '') { etp=etp.replace(opl,''); } if (('' + etp).trim() != '') { event.target.value=event.target.placeholder; } }; }
//alert('11 ' + othis.outerHTML);
//alert('111 ' + othis.outerHTML);
if (('' + othis.outerHTML).indexOf(' pattern=') != -1) {
//alert(1111);
withinregexp=('' + othis.outerHTML).split(' pattern=')[1].substring(1).split(('' + othis.outerHTML).split(' pattern=')[1].substring(0,1))[0];
if (withinregexp.trim() != '') {
if (document.getElementById('spat')) {
if (document.getElementById('spat').innerHTML.indexOf(' ... ') == -1) {
document.getElementById('spat').innerHTML+=' ... <font size=1>' + withinregexp + '</font>';
}
}
} else {
return retval;
}
val=othis.value;
//alert('11111 ' + val);
valr=val.split(String.fromCharCode(10));
for (jval=0; jval<valr.length; jval++) {
newstr='';
retv=-1;
rval=valr[jval];
retv=rval.search(eval("/" + withinregexp + "/i"));
if (retv == 0) {
newstr=rval.replace(eval("/" + withinregexp + "/i"), "");
} else if (retv < 0) {
othis.placeholder=opl;
othis.value='';
return false;
} else {
newstr=rval.replace(eval("/" + withinregexp + "/i"), "");
}
//alert(retv);
if (eval('' + newstr.length) != 0 || retv != 0) {
if (retv == 0) {
othisplaceholder+=opdelim + rval.substring(0,eval(eval('' + rval.length) - eval('' + newstr.length)));
} else if (retv > 0) {
othisplaceholder+=opdelim + rval.substring(retv).substring(0,eval(eval('' + rval.length) - eval('' + newstr.length)));
}
retval=false;
} else {
othisplaceholder+=opdelim + rval;
}
if (!retval) { retval=false; }
opdelim=String.fromCharCode(10);
}
if (retval) { othis.placeholder=opl; } else { othis.value=''; if ((othisplaceholder + String.fromCharCode(10)).substring(0,1) >= ' ') { othis.title='Double click makes suggestion the textarea value.'; } othis.placeholder=othisplaceholder; }
}
return retval;
}

function newpattooh(othis) {
var oothiss=document.getElementsByTagName('textarea');
if (eval('' + oothiss.length) > 0) {
oothiss[0].setAttribute('pattern', othis.value);
if (document.getElementById('thleft')) {
document.getElementById('thleft').title=othis.value;
}
if (document.getElementById('myfont')) {
document.getElementById('myfont').innerHTML=othis.value;
} else if (document.getElementById('spat')) {
document.getElementById('spat').innerHTML=document.getElementById('spat').innerHTML.split(' ... ')[0] + ' ... <font size=1 id="myfont">' + othis.value + '</font>';
}
}
}

setTimeout(function() {
oothis=null;
var oothiss=document.getElementsByTagName('textarea');
if (eval('' + oothiss.length) > 0) {
oothis=oothiss[0];
}
if (oothis) {
if (('' + oothis.outerHTML).indexOf(' pattern=') != -1) {
wrp=('' + oothis.outerHTML).split(' pattern=')[1].substring(1).split(('' + oothis.outerHTML).split(' pattern=')[1].substring(0,1))[0];
if (wrp.trim() != '') {
if (document.getElementById('thleft')) {
document.getElementById('thleft').title=wrp;
}
if (document.getElementById('tapattern')) {
document.getElementById('tapattern').value=wrp;
}
if (document.getElementById('spat')) {
if (document.getElementById('spat').innerHTML.indexOf(' ... ') == -1) {
document.getElementById('spat').innerHTML+=' ... <font size=1 id="myfont">' + wrp + '</font>';
}
}
}
}
}
}, 3000);

</script>
<style>
td { vertical-align: top; }
</style>
</head>
<body>
<h1>Textarea Onkeyup Alternative to Pattern Attribute</h1>
<h3>RJM Programming - November, 2024</h3>
<table style=width:98%; border=3>
<tr><th title=' pattern="[A-Za-z]{3}"' id=thleft>Textarea</th><th><span id=spat>User Pattern Ideas</span></th></tr>
<tr><td id=tdleft><textarea pattern="[A-Za-z]{3}" style=width:90%;background-color:yellow; onblur="return usepattern(this);" onkeyup=" this.value=patternfix(this); "></textarea></td><td id=tdright><input style=width:90%;background-color:yellow; id=disallowed onblur=disallow(this); type=text value='' title='Disallowed characters' placeholder='Disallowed characters'></input><br><input style=width:90%;background-color:yellow; id=onlyallowed onblur=onlyallow(this); type=text value='' title='Only allowed characters' placeholder='Only allowed characters'></input><br><input style=width:90%;background-color:yellow; id=tapattern onblur=newpattooh(this); type=text value='' title='Change pattern' placeholder='Textarea pattern'></input><br></td></tr>
</table>
</body>
</html>