jQuery - keyup和iPad插入符号定位

时间:2013-06-06 09:56:02

标签: javascript jquery email

我遇到了一个问题,即用户不断在我们的电子邮件字段中添加逗号;为了解决这个问题,我希望将逗号输入转换为句号。

现在有人说'逗号在电子邮件地址中有效'我完全清楚这不是一个很好的解决方案......我提前道歉但我是限制在一个电子邮件地址字段,我无法添加第二个用于验证目的......

现在除了iPad之外这个工作正常。 'keyup'事件似乎将输入中的插入位置移动到开头;如果我将其更改为'keydown'它按预期工作,但最后一个按键未转换

代码如下:

<label>email: </label>
<input id="tb_Email" length="30"></input>

和JS:

$(document).ready(function (event) {

          $(document).delegate("#tb_Email", "keyup", function (event) {
              if (event.which === 188) {
                  var cleanedValue = $(this).val().replace(",", ".");
                  $(this).val(cleanedValue);
              }
          });
      });

JSFiddle:http://jsfiddle.net/JXVcm/1/

是否有人建议修改此代码以按预期工作?

1 个答案:

答案 0 :(得分:1)

Try this

HTML:

<label>email:</label>
<input id="tb_Email" length="30"></input>

JS:

$(document).ready(function (event) {
    $(document).delegate("#tb_Email", "keyup", function (event) {
        if (event.which === 188) {
            var cleanedValue = $(this).val().replace(",", ".");
            $(this).val(cleanedValue);
            $(this).caretToEnd();
        }
    });

    //Set caret position easily in jQuery
    (function ($) {
        // Behind the scenes method deals with browser
        // idiosyncrasies and such
        $.caretTo = function (el, index) {
            if (el.createTextRange) {
                var range = el.createTextRange();
                range.move("character", index);
                range.select();
            } else if (el.selectionStart != null) {
                el.focus();
                el.setSelectionRange(index, index);
            }
        };

        // The following methods are queued under fx for more
        // flexibility when combining with $.fn.delay() and
        // jQuery effects.

        // Set caret to a particular index
        $.fn.caretTo = function (index, offset) {
            return this.queue(function (next) {
                if (isNaN(index)) {
                    var i = $(this).val().indexOf(index);

                    if (offset === true) {
                        i += index.length;
                    } else if (offset) {
                        i += offset;
                    }

                    $.caretTo(this, i);
                } else {
                    $.caretTo(this, index);
                }

                next();
            });
        };

        // Set caret to beginning of an element
        $.fn.caretToStart = function () {
            return this.caretTo(0);
        };

        // Set caret to the end of an element
        $.fn.caretToEnd = function () {
            return this.queue(function (next) {
                $.caretTo(this, $(this).val().length);
                next();
            });
        };
    }(jQuery));

我为位置添加了小插件代码。