张春成
V2
2022/09/24阅读:22主题:默认主题
前端输入微调交互样例
前端输入微调交互样例
Figma 是一个十分漂亮和高效的原型设计辅助软件,在使用它的过程中,遇到了很多提升用户交互效率的小 Trick。
本文复现了 Figma 上的一个十分用户友善的应用,它在前端输入时,允许用户采用鼠标拖动的方式对数值弄输入进行微调。
用户场景
Figma 是一个十分漂亮和高效的原型设计辅助软件,在使用它的过程中,遇到了很多提升用户交互效率的小 Trick。
Figma

Figma
比如,在输入数值型数据的时候,它允许用户使用鼠标拖拽的方式进行输入,而不是传统的通过键盘输入,这种估计极大地提升了数值微调的输入效率,交互过程也更加直观和精确。于是充满好奇的我就通过 HTML + JS 的方式对这个功能进行了模拟和复现。
开源代码 Codepen.io
https://codepen.io/listenzcc/pen/OJZxqwP

样例图像
实现代码
<div class="mainDiv">
<h1>Normal vs. Dragging inputs</h1>
<h2>A demo of noval input UI</h2>
<p>
It is inspired by the
<a href="https://www.figma.com/">Figma</a>
UI, in which the input numbers are bounded with the mouse dragging
events.
<br />
<br />
It allows the USER fine-tunes the value by mouse-dragging,
<br />
instead of Clicking the <b>too small</b> button or Pressing the
<b>far away</b> keyboard.
</p>
<!-- Normal input -->
<div>
<h2>
Normal Input
<span id="span-1"> 0 </span>
</h2>
<span> Value </span>
<input id="input-1" type="number" value="0" />
</div>
<!-- Draggins input -->
<div>
<h2>
Dragging Input
<span id="span-2"> 0 </span>
</h2>
<p>Drag the colored tag to adjust the value</p>
<span id="span-2-dragging" style="color: burlywood">
Value (Mousedown)
</span>
<input id="input-2" type="number" value="0" />
</div>
<div></div>
</div>
// Handle inputs
document.getElementById("input-1").addEventListener("input", () => {
const v = document.getElementById("input-1").value;
document.getElementById("span-1").innerHTML = v;
});
function updateSpan2(e, value) {
var v, innerHTML;
if (value) {
document.getElementById("input-2").value = value;
v = value;
innerHTML = `<span class="mouseDragging">${v}<span>`;
} else {
v = document.getElementById("input-2").value;
innerHTML = v;
}
document.getElementById("span-2").innerHTML = innerHTML;
return v;
}
document.getElementById("input-2").addEventListener("input", updateSpan2);
// Handle dragging
const controller = {
ondrag: false,
startPtr: null,
scale: 10,
value: 0,
};
document
.getElementById("span-2-dragging")
.addEventListener("mousedown", (e) => {
controller.ondrag = true;
controller.value = parseInt(updateSpan2());
controller.startPtr = e.screenX;
console.log("Event mousedown", controller, e);
});
document.addEventListener("mouseup", (e) => {
console.log("Event mouseup", e);
if (!controller.ondrag) return;
controller.ondrag = false;
updateSpan2();
});
document.addEventListener("mousemove", (e) => {
if (!controller.ondrag) return;
// console.log("Event mousemove", e);
const x = e.screenX - controller.startPtr;
const dx = parseInt(x / controller.scale);
console.log(x, dx);
updateSpan2(null, controller.value + dx);
e.preventDefault();
});
span.mouseDragging {
color: burlywood;
}
div {
border-top: gray solid 1px;
margin: 1em;
}
div.mainDiv {
text-align: center;
}
html {
background-color: darkslategrey;
color: white;
}
a {
color: pink;
}
作者介绍
张春成
V2