jQuery 只有数字和 px/em 输入答案

【问题标题】：jQuery only numbers and px/em inputjQuery 只有数字和 px/em 输入
【发布时间】：2018-07-16 13:14:50
【问题描述】：

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

这就是我现在拥有的 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”。

这可能吗？

【问题讨论】：

标签： jquery numbers autofill

【解决方案1】：

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

【讨论】：

type=number 是 HTML5，所以对于旧版浏览器，我可能会遇到问题。而且我不想让概述变得混乱，所以我想缩小表单字段，如果这是可能的，那么我可以清理很多表单！

【解决方案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;
    }
};

【讨论】：