Member Avatar for Xessa

I want to avoid user to press " and ' characters.

What must i do in keyup event?

  • 4 Contributors
  • 3 Replies
  • 123 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential

Dani AI

Generated

Keypress or keyup alone is brittle. , and show common client-side tactics, but they miss real-world cases: paste/drag, mobile IME/composition, browser autofill and accessibility tools. Also watch for brittle checks (key codes change by platform) and code that assumes a regex match always returns an array (that can throw when null).

A reliable client-side pattern is to normalize on the input event and to handle composition (IME) so multi-keystroke input is not corrupted. The example below removes single and double quotes while preserving the caret position.

const el = document.getElementById('noQuotes');

let composing = false;
el.addEventListener('compositionstart', () => composing = true);
el.addEventListener('compositionend', (e) => {
  composing = false;
  sanitize(e.target);
});

el.addEventListener('input', (e) => {
  if (!composing) sanitize(e.target);
});

function sanitize(target) {
  const before = target.value;
  const after = before.replace(/['"]/g, '');
  if (after === before) return;
  const caret = Math.max(0, target.selectionStart - (before.length - after.length));
  target.value = after;
  try { target.setSelectionRange(caret, caret); } catch (err) { /* some elements may not support it */ }
}

The input handler covers typed characters, paste and drop in most browsers. For stricter paste control add a paste listener and insert sanitized clipboard text. Remember that client-side filtering is for UX only: always validate and escape on the server (for example, remove or escape quotes server-side, and use parameterized queries and proper HTML escaping on output). Finally, consider whether stripping quotes is the right UX — sometimes escaping or rejecting invalid submissions with a clear message is friendlier than silent removal.

Recommended Answers

All 3 Replies

Member Avatar for almostbob

It is better to validate the form on submission, as well
character strings can equal representations of the character you dont want, "

<script type='text/javascript'>
function isAlphabet(elem, helperMsg){
 var alphaExp = /^["']+$/;
 if(elem.value.match(alphaExp)){
  alert(helperMsg);
  elem.focus();
 return true;
}else{ return false; }
}
</script>
<form>
Letters Only: <input type='text' id='letters' onkeyup="isAlphabet(document.getElementById('letters'), 'Cannot contain quote characters')" />
</form>

Fragment only, not checked for long strings

Member Avatar for itsjareds

You could also try:

<html>
<body>
<script type="text/javascript">
function notAQuote(e) {
	var keynum;
	var keychar;
	var numcheck;

	if(window.event) // IE
		keynum = e.keyCode;
	else if(e.which) // Netscape/Firefox/Opera
		keynum = e.which;

	var notQuote;

	switch (keynum) {
		case 34:
			notQuote = false;
			break;
		case 39:
			notQuote = false;
			break;
		default:
			notQuote = true;
	}

	return notQuote;
}
</script>

<form>
<input type="text" onkeypress="return notAQuote(event)" />
</form>

</body>
</html>
commented: thank you. +2
Member Avatar for essential

You can also try this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html id="html40L" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>X-Window</title>
<style type="text/css">
<!--
input {
   display : block;
   height : 15%;
   letter-spacing : 4px;
   margin : .300em 0 1em 0;
   width : 30%; }  
-->
</style>
<script type="text/javascript">
<!--
var quot = function( sdQuote ) {
var quoted = "";

   sdQuote = (( document.getElementById ) ? document.getElementById( sdQuote ) : document.all[ sdQuote ] );

   filterQ = sdQuote.value.match(/[\"\']+/g); 
   for ( var x = 0; x < filterQ.length; x++ ) {
      if ( filterQ[ x ] ) {
      quoted += "[ " + (( x ) + 1 ) + " " + String( filterQ[ x ] ).fontcolor("blue") + " ] ";
      sdQuote.value = sdQuote.value.replace( filterQ[ x ], "" );
      (( document.getElementById ) ? document.getElementById( "count" ) : document.all.count ).innerHTML = "Invalid Character" + (( filterQ.length > 1 ) ? "s" : "" ) + " : " + quoted;
      continue;
      }
   }
};

//-->
</script>
</head>
<body>
<div id="main">
<form id="testform" name="testform" action="*" onsubmit="return false;">
<div>
<label for="txt">Test Field: <input type="text" id="txt" name="txt" onkeyup="quot(( this.id |= 'txt' ));" value=""></label>
<div id="count"></div>
</div>
</form>
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.