小计001

67 阅读1分钟

input 在移动端时 type 类型带来的差异

移动端输入时会调用输入法的软键盘进行输入,如果同一form内有多个input时输入法的右下角会有下一项的按钮。部分机型上发现非同个form的多个输入框做的搜索时右下角会出现下一项跳到下一个搜索框区域。

把输入框 input 的 type 类型转为 search,可以使得系统采用默认搜索的输入方式进行输入,而不会出现文本输入时的下一项跳转下一个 input 区域

根据fontsize计算真实宽度

使用canvas 2d 计算文本在对应fontSize下的真实宽度

function measureText(val,fontSize){
    const font = `${fontSize}px arial`;
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    context.font = font;
    const { width } = context.measureText(val);
    return width
}

引用自