console
(() => {
if ($.fn.format) {
return;
}
if ($.formats == null) {
$.formats = {};
}
if(typeof Number.parse === "undefined"){
Number.parse = x => Number(x);
}
$.extend($.formats, {
trim(_, value, args) {
if (typeof value === "string") {
switch ((args || "all").trim().toLowerCase()) {
case "right":
case "r":
return value.trimRight();
case "left":
case "l":
return value.trimLeft();
default:
return value.trim();
}
}
},
float: {
format(_, value, digits) {
const number = Number.parse(value);
if (number != null) {
const str = value + "";
if (str.indexOf(".") < 0) {
str += ".";
}
return (str + "00000000000000000000").replace(new RegExp("(?<=\\.\\d{" + digits + ",})0+$"), "")
}
},
unformat(_, value) {
const number = Number.parse(value);
if (number != null) {
return number.toString();
}
}
},
prefix: {
format(_, value, text) {
if (str(text) != "" && str(value) != "") {
return text + value;
}
},
unformat(_, value, text) {
if (text && typeof value === "string" && value.startsWith(text)) {
return value.substring(text.length);
}
}
},
postfix: {
format(_, value, text) {
if (str(text) != "" && str(value) != "") {
return value + text;
}
},
unformat(_, value, text) {
if (text && typeof value === "string" && value.endsWith(text)) {
return value.substring(0, value.length - text.length);
}
}
},
thous: {
format(_, value, flag) {
const number = Number.parse(value);
if (number != null) {
const point = value.toString().indexOf(".");
const digits = point < 0 ? 0 : value.toString().length - point - 1;
const ret = number.toLocaleString("zh-CN", { maximumFractionDigits: 20, minimumFractionDigits: digits });
if (flag && flag !== ",") {
return ret.replace(/,/g, flag);
}
return ret;
}
},
unformat(_, value, flag) {
if (typeof value === "string") {
const reg = new RegExp("(" + (flag || ",") + "(\\d{3}))|(^[^\\d+-]+\\s?)|((\\s?\\D+$))", "g");
return value.replace(reg, "$2");
}
}
},
round(_, value, digits, data) {
if (data && data.type === 'change') {
return Number.scale(value, { decimals: digits, mode: "round" });
}
},
floor(_, value, digits, data) {
if (data && data.type === 'change') {
return Number.scale(value, { decimals: digits, mode: "floor" });
}
},
ceil(_, value, digits, data) {
if (data && data.type === 'change') {
return Number.scale(value, { decimals: digits, mode: "ceil" });
}
},
number: {
format(jq, value) {
if (value == "" || value == null) {
return "";
}
const number = Number.parse(value);
if (number == null) {
return jq[0].lastNumber || "";
}
jq[0].lastNumber = number;
return number;
},
defaultArgument: "0",
unformat(_, value, emptyText) {
const number = Number.parse(value);
if (number == 0) {
return emptyText;
}
else if (number != null) {
return number.toString();
}
}
},
percent: {
format(_, value) {
const number = Number.parse(value);
if (number != null) {
return Number.movePoint(number, 2) + "%";
}
},
unformat(_, value) {
if (typeof value === "string" && value.endsWith("%")) {
const number = Number.parse(value.slice(0, -1));
if (number != null) {
return Number.movePoint(number, -2).toString();
}
}
},
},
milli: {
format(_, value) {
const number = Number.parse(value);
if (number != null) {
return Number.movePoint(number, 3) + "‰";
}
},
unformat(_, value) {
if (typeof value === "string" && value.endsWith("‰")) {
const number = Number.parse(value.slice(0, -1));
if (number != null) {
return Number.movePoint(number, -3).toString();
}
}
},
},
min(_, value, min) {
min = Number.parse(min);
if (!isNaN(min)) {
const number = Number.parse(value);
if (number != null && number < min) {
return min;
}
}
},
max(_, value, max) {
max = Number.parse(max);
if (!isNaN(max)) {
const number = Number.parse(value);
if (number != null && number > max) {
return max;
}
}
},
empty(_, value, hold) {
if (value === "") {
return hold;
}
},
['$']: "postfix",
['^']: "prefix",
[',']: "thous",
['%']: "percent",
['‰']: "milli",
['f']: "float",
['.']: "floor",
['#']: "number",
['>=']: "min",
['<=']: "max",
['~']: "empty",
['ceiling']: "ceil",
});
function format(rule, beFormat, jq, value, data) {
const colon = rule.indexOf(":");
let arg = colon < 0 ? null : rule.substring(colon + 1);
const name = colon < 0 ? rule : rule.substring(0, colon);
let fn = $.formats[name];
while (typeof fn === "string") {
fn = $.formats[fn];
}
if (arg == null) {
arg = fn && fn.defaultArgument;
}
if (beFormat) {
fn = typeof fn === "object" ? fn.format : fn;
} else {
fn = fn && fn.unformat;
}
if (fn == null) {
return value;
}
try {
var ret = fn.apply(jq[0], [jq, value, arg == null ? "" : arg, data]);
if (ret != null) {
return ret;
}
return value;
} catch (e) {
console.error("format/unformat [" + name + "] error:" + e.message, e);
return value;
}
}
function getFormatter(beFormat) {
return function (e) {
if (!this.is("[format]")) {
return this.val();
}
let rules = this.attr("format").split("|");
if (!beFormat) {
rules = rules.reverse();
}
let value = this.val();
for (const rule of rules) {
value = format(rule, beFormat, this, value, e);
}
if (e === 'refresh') {
if (this.is(":input")) {
this[0].value = value
} else {
this[0].textContent = value;
}
}
return str(value);
}
}
$.fn.extend({
format: getFormatter(true),
unformat: getFormatter(false),
});
function str(obj) {
if (typeof obj === "string") {
return obj;
}
if (obj == null) {
return "";
}
return obj.toString();
}
function onchange(e) {
const jq = $(e.target);
const value = jq.format(e);
if (value != jq[0].value) {
jq[0].value = value;
}
jq.off("recover.format");
}
const selector = ":input[format]:not([readonly],[disabled])";
$(document)
.on("change.format", selector, onchange)
.on("paste.format", selector, e => $(e.target).off("recover.format"))
.on("created.format", selector, onchange)
.on("blur.format", selector, e => {
$(e.target).not().trigger("recover.format");
})
.on("focus.format", selector, e => {
const jq = $(e.target);
const old = e.target.value;
const value = jq.unformat();
if (value != jq[0].value) {
jq[0].value = value;
}
jq.one("recover.format", () => e.target.value = old);
});
window.createdHooks.push({
tagName: "INPUT",
attr: "format",
});
window.addEventListener("created", function (e) {
if (e.target.tagName === "INPUT") {
$(e.target).format("refresh");
}
})
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery input format</title>
</head>
<body>
去空格: <input type="text" value=" 空空空 " format="trim" /><br>
数字: <input type="text" value="1234567.89" format="number|float:2" /><br>
金额:<input type="text" value="654321.56" format="number|float:4|,|^:¥|$:元"><br>
百分比:<input type="text" value="0.75" format="trim|number|.:4|,|%"><br>
千分之一:<input type="text" value="0.255" format="trim|‰" unformat="‰">
<script>
$(function(){
$("input").format("refresh");
})
</script>
</body>
</html>