今天收到一个需求,input的宽度随着内容的变化而变化,最重要的还有最大宽度的限制。
然后各种查资料个尝试,做了三个小案例:
一、获取文字数量*文字宽度去计算
虽然说这个方法代码量比较少,但是在不同的字体中还是有一定的误差的,所以建议不要使用,但是分享的角度来讲,我还是拿出来写一写。
这个方法对于中文还是可以的,但是一般遇到中英文混合就不行了,所以如果是中英文混合的input我建议放弃。
二、利用scrollWidth来制作一个边长的(变不了短)
这个是有缺陷的,因为我们获取的是scrollWidth指,所以他只能获取最长的,而不能获取文字不撑开的时候的长度。
咱们直接贴代码把
三、文本比较法,这个方法虽然比较繁杂,但是无论误差还是可行性都是最高的
咱们先来个布局:
其实JQ和原生JS一样的道理,如果你使用JQ的直接拿走就可以了,如果是原生的按照这个想法写就可以了。