Block characters from input text field, enter mirror in span or div

Question

I have html

<input type="text" name="name" value="" id="name">
<div id="preview"></div>

Entry rules in the field:

• Letters AZ az 0-9 space and dash, no other characters are allowed
  
• Entering forbidden characters should not do anything
  

Rules for div:

• Show all characters when they are entered in the input field
  
• Do not show characters that are prohibited
  
• When space meets, show it as a dash
  

I had different potions, working, not working, or bad behavior. This version seems to work in all cases that I can check except backspace / delete does not work. Tested only in Safari.

There are other areas of "gotcha", such as entering text between already entered text, selecting all using the arrow keys, all of which play a role in this problem.

 $(document).ready(function(){
  $('#name').keypress(function(e) {
   // get key pressed
   var c = String.fromCharCode(e.which);
   // var d = e.keyCode? e.keyCode : e.charCode; // this seems to catch arrow and delete better than jQuery way (e.which)
   // match against allowed set and fail if no match
   var allowed = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890- ';
   if (e.which != 8 && allowed.indexOf(c) < 0) return false; // d !== 37 && d != 39 && d != 46 && 
   // just replace spaces in the preview
   window.setTimeout(function() {$('#preview').text($('#name').val().replace(/ /g, '-'));}, 1);
  });
 });

, . , :)

Answer 1

, , . Twitter. , b/c, , .

$(document).ready(function () {
    var SpacePattern = / /g;

    var name = $("#name");
    var preview = $("#preview");

    var updatePreview = function () {
        preview.text(name.val().replace(SpacePattern, "-"));
    };

    name.keypress(function (e) {
        if (e.which > 0 && // check that key code exists
            e.which != 8 && // allow backspace
            e.which != 32 && e.which != 45 && // allow space and dash
            !(e.which >= 48 && e.which <= 57) && // allow 0-9
            !(e.which >= 65 && e.which <= 90) && // allow A-Z
            !(e.which >= 97 && e.which <= 122)   // allow a-z
            ) {
            e.preventDefault();
        }
        else {
            setTimeout(updatePreview, 0);
        }
    });

    name.keyup(updatePreview); // Needed by IE for Delete and Backspace keys
});

Answer 2

Firefox, Safari Internet Explorer. , , .

jQuery . jQuery (http://plugins.jquery.com/project/caret-range).

$(document).ready(function () {
    var InvalidPattern = /[^a-z0-9\- ]+/gi;
    var SpacePattern = / /g;

    var name = $("#name");
    var preview = $("#preview");

    var callback = function (e) {
        setTimeout(function () {
            // Get range and length to restore caret position
            var range = name.caret();
            var len = name.val().length;

            // Blur element to minimize visibility of caret jumping
            name.get(0).blur();

            // Remove invalid characters, and update preview
            name.val(name.val().replace(InvalidPattern, ""));
            preview.text(name.val().replace(SpacePattern, "-"));

            // Restore caret position
            var diff = len - name.val().length;
            name.caret(range.start - diff, range.end - diff);
        }, 0);
    };

    name.keypress(callback);
    name.keydown(callback); // Needed by IE to update preview for Delete and Backspace
});

/*
 * jQuery Caret Range plugin
 * Copyright (c) 2009 Matt Zabriskie
 * Released under the MIT and GPL licenses.
 */
(function($) {
    $.extend($.fn, {
        caret: function (start, end) {
            var elem = this[0];

            if (elem) {                         
                // get caret range
                if (typeof start == "undefined") {
                    if (elem.selectionStart) {
                        start = elem.selectionStart;
                        end = elem.selectionEnd;
                    }
                    else if (document.selection) {
                        var val = this.val();
                        var range = document.selection.createRange().duplicate();
                        range.moveEnd("character", val.length)
                        start = (range.text == "" ? val.length : val.lastIndexOf(range.text));

                        range = document.selection.createRange().duplicate();
                        range.moveStart("character", -val.length);
                        end = range.text.length;
                    }
                }
                // set caret range
                else {
                    var val = this.val();

                    if (typeof start != "number") start = -1;
                    if (typeof end != "number") end = -1;
                    if (start < 0) start = 0;
                    if (end > val.length) end = val.length;
                    if (end < start) end = start;
                    if (start > end) start = end;

                    elem.focus();

                    if (elem.selectionStart) {
                        elem.selectionStart = start;
                        elem.selectionEnd = end;
                    }
                    else if (document.selection) {
                        var range = elem.createTextRange();
                        range.collapse(true);
                        range.moveStart("character", start);
                        range.moveEnd("character", end - start);
                        range.select();
                    }
                }

                return {start:start, end:end};
            }
        }
    });
})(jQuery);

Answer 3

: 1. TextField. 2. , RegEx (- /^ [a-zA-Z0-9 -] * $/), unmatch, .

:

var ValidPattern = /^[a-zA-Z0-9\- ]*$/;
$(document).ready(function(){
    $('#name').keydown(function(e) {
        var aValue = $('#name').val();
        $('#name').attr("oldValue", aValue);

        return true;
    });
    $('#name').keyup(function(e) {
        var aValue   = $('#name').val();
        var aIsMatch = aValue.search(ValidPattern) != -1;
        if(aIsMatch) {
            $('#preview').text(aValue);
        } else {
            var aOldValue = $('#name').attr("oldValue");
            $('#name')   .val (aOldValue);
            $('#preview').text(aOldValue);
        }
    });
});

.

Answer 4

, , div. .

.