49 lines
1.8 KiB
Plaintext
49 lines
1.8 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Aurora Admin · NumberRangeInput（普通 H5）</title>
|
||
<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
|
||
<link rel="stylesheet" href="NumberRangeInput.css" />
|
||
<style>body{margin:0;padding:24px;background: var(--au-color-page-bg);}</style>
|
||
</head>
|
||
<body>
|
||
<div class="aa-numrange" role="group" id="app">
|
||
<input type="number" id="min" placeholder="最小" />
|
||
<span class="aa-numrange-sep">—</span>
|
||
<input type="number" id="max" placeholder="最大" />
|
||
<span class="aa-numrange-unit">元</span>
|
||
<span class="aa-numrange-msg" role="group" id="msg"></span>
|
||
</div>
|
||
|
||
<script>
|
||
var root = document.getElementById('app');
|
||
var minEl = document.getElementById('min');
|
||
var maxEl = document.getElementById('max');
|
||
var msg = document.getElementById('msg');
|
||
var STEP = 1, MIN = 0, MAX = 10000;
|
||
|
||
function validate() {
|
||
var a = parseFloat(minEl.value);
|
||
var b = parseFloat(maxEl.value);
|
||
var err = '';
|
||
if (minEl.value !== '' && (a < MIN || a > MAX)) err = '最小值需在 ' + MIN + '~' + MAX;
|
||
else if (maxEl.value !== '' && (b < MIN || b > MAX)) err = '最大值需在 ' + MIN + '~' + MAX;
|
||
else if (minEl.value !== '' && maxEl.value !== '' && a > b) err = '最小值不能大于最大值';
|
||
root.classList.toggle('is-error', !!err);
|
||
msg.textContent = err;
|
||
return !err;
|
||
}
|
||
[minEl, maxEl].forEach(function (el) {
|
||
el.addEventListener('input', validate);
|
||
el.addEventListener('blur', function () {
|
||
var v = parseFloat(el.value);
|
||
if (!isNaN(v)) el.value = Math.round(v / STEP) * STEP;
|
||
validate();
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|