Question

我有一些HTML

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

进入该领域的规则：

字母A-Z a-z 0-9空格和短划线，不允许其他字符
禁止输入禁止字符

div的规则：

显示输入字段中输入的每个字符
不要显示被禁止的字符
遇到空格时，请将其显示为破折号

我有各种魔药在工作，没有工作或行为不端。这个版本似乎适用于除了退格/删除之外我无法测试的所有情况。到目前为止只在Safari中测试过。

还有其他“陷阱”区域，比如输入已输入文本之间的文本，选择全部，使用箭头键，所有这些都在此问题中起作用。

 $(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's 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

我在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 2

在修修补补之后，我重构了我以前的解决方案。此版本的行为应与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 3

试试这个： 1.按下键时，复制上一个TextField值。 2.键入时，使用RegEx验证文本（类似于/ ^ [a-zA-Z0-9 - ] * $ /），如果不匹配，则将值替换为旧值。

以下是代码：

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中显示它。它将更容易和用户友好。

最好不要尝试使用键盘阻止用户的默认操作。

阻止输入文本字段中的字符，镜像输入到span或div

4 个答案: