前端输入微调交互样例

Figma 是一个十分漂亮和高效的原型设计辅助软件，在使用它的过程中，遇到了很多提升用户交互效率的小 Trick。

本文复现了 Figma 上的一个十分用户友善的应用，它在前端输入时，允许用户采用鼠标拖动的方式对数值弄输入进行微调。

---

• 前端输入微调交互样例

  • 用户场景
  • 实现代码

用户场景

Figma 是一个十分漂亮和高效的原型设计辅助软件，在使用它的过程中，遇到了很多提升用户交互效率的小 Trick。

Figma

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;
}