阻止输入文本字段中的字符，镜像输入到span或div
我有一些HTML
进入该领域的规则：
- 字母AZ az 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); }); });
如果有办法在这篇文章上加上金钱奖励，请告诉我。 是的，这就是我在这一个:)
在修修补补之后，我重构了我以前的解决方案。 此版本的行为应与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 AZ !(e.which >= 97 && e.which <= 122) // allow az ) { e.preventDefault(); } else { setTimeout(updatePreview, 0); } }); name.keyup(updatePreview); // Needed by IE for Delete and Backspace keys });
我在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);
试试这个：1。当按下键时，复制前一个TextField值。 2.当键入时，使用RegExvalidation文本（类似于/ ^ [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); } }); });
试试吧。
我认为最好的方法是保留一个按钮，然后在文本框中输入文本并单击按钮在div中显示它。 它将更容易和用户友好。
最好不要尝试用键盘阻止用户的默认操作。