jQuery 仅数字和 px/em 输入

Question

我正在尝试让人们可以在输入字段中填写像素或 ems，但我希望通过检查/自动填充来更好一点。

这是我现在拥有的 jQuery 脚本：

$options.keydown(function (e) {
    // Allow: backspace, delete, tab, escape, enter, dot, e, m , p, x
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190, 69, 77, 80, 88]) !== -1 ||
         // Allow: Ctrl+A, Command+A
        (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
        (e.keyCode >= 35 && e.keyCode <= 40)) {
             return;
    }
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

所以人们只能输入数字、点或输入 px 或 em。但是当一个人只输入“20”时我怎么能自动填充输入呢？输入将自动填充为“20px”会很好。当此人只是在字段中输入 "eeee" 时，它将被清除。因此只允许格式 "px" 或 "em"。当有人不输入单位时，输入将自动在其后面填充 "px"。

这可能吗？

Answer 1

你不能简单地在输入字段上使用 type="number" 吗？并在 JS 中附加单位值，或者附加第二个表单字段（select，带选项）。

Answer 2

这是我现在可以使用的脚本：

jQuery('.units input').on('change', function() {

    e = jQuery(this).val();
    units(e);
    jQuery(this).val(e);

});

var units = function( value) {
    if ( jQuery.isNumeric(value) ) {
        e = value + 'px';
        return e;
    } else if ( value.indexOf('px') > -1  || value.indexOf('em') > -1  ) {
        var Pixels  = e.replace("px", "");
        var Ems  = e.replace("em", "");
        if ( jQuery.isNumeric(Pixels) || jQuery.isNumeric(Ems) ) {
            e = value;
            return e;
        } else {
            e = "0px";
            return e;
        }
    } else {
        e = "0px";
        return e;
    }
};

jQuery 仅数字和 px/em 输入

jQuery only numbers and px/em input

jquery

numbers

autofill