feat: 生产订单调入数量输入优化(去箭头 + 上下方向键行间导航)

- 调入数量输入框由 type=number 改为 type=text inputmode=decimal,去掉浏览器原生上下调节箭头,左右方向键在文本内移动光标
- 新增脚本:在调入数量输入框内按 ↑/↓ 在上一行/下一行同列输入框之间移动焦点(首末行不越界),跳转后光标置于文本末尾,便于逐行录入
This commit is contained in:
2026-10-19 09:52:26 +08:00
parent 639d7f1545
commit e9b605fca6
+26 -2
View File
@@ -33,10 +33,10 @@
<td class="num">
{% if r.posted %}
<div style="margin-bottom:3px"><span class="badge ok" title="已生成入库流水, 可直接修改后保存/确认">已调入</span></div>
<input name="alloc_{{ r.m.id }}" type="number" step="0.01" min="0"
<input name="alloc_{{ r.m.id }}" type="text" inputmode="decimal"
value="{{ '%.2f'|format(r.alloc) }}" style="width:96px">
{% else %}
<input name="alloc_{{ r.m.id }}" type="number" step="0.01" min="0"
<input name="alloc_{{ r.m.id }}" type="text" inputmode="decimal"
value="{{ '%.2f'|format(r.alloc) if r.alloc else '' }}"
placeholder="{{ '%.2f'|format(r.need) }}" style="width:96px">
{% endif %}
@@ -88,4 +88,28 @@
{% else %}
<p class="flash ok">该订单已领料出库。</p>
{% endif %}
<script>
(function(){
// 调入数量输入框:上下方向键在「上一行/下一行」的同列输入框之间移动焦点
// (左右方向键保持默认行为:在文本内移动光标)
function allocInputs(){
return Array.prototype.slice.call(document.querySelectorAll('input[name^="alloc_"]'));
}
document.addEventListener('keydown', function(e){
if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
var t = e.target;
if(!t || t.tagName !== 'INPUT' || t.name.indexOf('alloc_') !== 0) return;
var inputs = allocInputs();
var idx = inputs.indexOf(t);
if(idx < 0) return;
var next;
if(e.key === 'ArrowUp'){ if(idx <= 0) return; next = inputs[idx - 1]; }
else { if(idx >= inputs.length - 1) return; next = inputs[idx + 1]; }
e.preventDefault();
next.focus();
try { var v = next.value; next.setSelectionRange(v.length, v.length); } catch(_){}
});
})();
</script>
{% endblock %}