Asked  10 Months ago    Answers:  5   Viewed   11 times

I am wanting to restrict the input characters for a text box to [a-z0-9_-]. However whenever if do this buttons like backspace and the arrow keys don't work. I have found some attempts on this website and others but either they don't work properly on all browsers or they use a black list. For example the W3Schools website example black lists numbers. Is there a way to use white list (the one above) and still allow keys like backspace, arrows, home, end etc? Or do i have to add everyone of the key codes that match the keys i want to allow? I do something like this (this is shortened for simplicity).

EDIT - Added code

 <input type="text" onkeypress="return checkInput();">
    function checkInput(){
        return /[a-z0-9_-]/gi.test(String.fromCharCode(window.event.keyCode));




Just change the regex in the example to something like this:

numcheck = /[^a-z0-9_-]/;

Or better yet, avoid the double negative with:

numcheck = /[a-z0-9_-]/;
return numcheck.test(keychar);

Then you can look up the keycodes of backspace, etc. and check for them too:

if (keychar === 8) return true;

Or even put them in your regex:

numcheck = /[a-z0-9_x08-]/;
Saturday, August 7, 2021

I am sure this is what you want:

function touchHandler(event)
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type = "mousemove"; break;        
        case "touchend":   type = "mouseup";   break;
        default:           return;

    // initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //                screenX, screenY, clientX, clientY, ctrlKey, 
    //                altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                                  first.screenX, first.screenY, 
                                  first.clientX, first.clientY, false, 
                                  false, false, false, 0/*left*/, null);;

function init() 
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);    

I've captured the touch events and then manually fired my own mouse events to match. Although the code isn't particularly general purpose as is, it should be trivial to adapt to most existing drag and drop libraries, and probably most existing mouse event code. Hopefully this idea will come in handy to people developing web applications for the iPhone.


In posting this, I noticed that calling preventDefault on all touch events will prevent links from working properly. The main reason to call preventDefault at all is to stop the phone from scrolling, and you can do that by calling it only on the touchmove callback. The only downside to doing it this way is that the iPhone will sometimes display its hover popup over the drag origin. If I discover a way to prevent that, I'll update this post.

Second Update:

I've found the CSS property to turn off the callout: -webkit-touch-callout.

Wednesday, June 2, 2021

There is the possibility of a background-image but it's difficult to maintain, and doesn't react to font size changes, which makes it the less optimal choice IMO.

A better way in my opionion would be:

  • Put a <span>$</span> next to the input (before it, actually).

  • give it position: relative; left: 20px.

  • The $ sign then moves into the input field.

  • Then, give the input field padding-left: 24px.

  • Voilá! The $ sign is in the input field, does not obscure anything, and cannot be removed.

Wednesday, July 28, 2021

onkeypress just catches character keys. Use onkeydown and/or onkeyup for the other keys. See Peter-Paul Koch on key events.

Saturday, August 7, 2021

How about delegation events to parent elements like here?

<span style="position:relative;" onClick="'clicked';">
  <input type="text" disabled "/>

If my answer is acceptable please comment it and I'll make an explanation.

Tuesday, August 24, 2021
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :