textarea限制每行可输入固定个数的字符

2024-05-06 05:04:32

textarea限制每行只可输入固定的字符，这个需求在H5移动端真的很mmp，这个需求怼了我不少时间，曾经为它通宵过，此处省略一万字。。。

简(变)单(态)的需求：

有两种textarea,一种是一行只能输入35个字符，一个是一行只能输入50个字符；（看起来很简单的样子）

需要考虑的问题：

1.一行怎么控制字数；
2.每个字母的宽度不一样，比如”W”和”I”，数字的宽度也不一样，比如”1”和”8”（可能第一行全部是”W”，第二行全部是”I”,这样就算字符个数相同长度不同看起来也很奇怪，就像下面的这张图，12个”i”和4个”w”差不多宽）;

3.不同移动设备下字体的大小在变化(项目中单位都是以rem为标准)；
4.需要兼容网页端和APP(最终会嵌入在APP中)

针对上面的问题，最终思路如下：

1、设定textarea字体为等宽字体，等宽字体是指这种字体下”W”和”I”是等宽的，这类字体有Courier New,Arial,Helvetica,Sans-serif等；
2、我们用js控制textarea的宽度为刚好35个字符的宽度；
3、为了解决不同浏览器、APP对单位解析的精度不一样，我们设置的宽度大小需要稍微大一点点，不然的话可能一行能容纳36个字符，也可能会只能容纳34个字符(这是个大坑，这是精度问题)。

相关代码：

function setTextareaWidth(){//将rem单位转化为px  字体默认是0.3remvar a = 0.3*parseFloat(document.documentElement.style.fontSize);//设置字体$("textarea").css("font-size",a+"px");//计算35个字符的长度var str = "";for(var i=0;i<35;i++){str += "w";}var width = textSize(a+"px","Arial",str);//计算4/5个字符的宽度  作为兼容误差var offset = textSize(a+"px","Arial","w").width * 4 / 5;//设置textarea宽度$("textarea").css("width",width+offset+"px");
}

说明：这里textarea字体设置为0.3rem，和页面字体大小一样，设置rem单位适配不同屏幕；计算字符串的显示宽度参考上一篇博客Js获取字符串的显示宽度/高度如有问题，欢迎留言。

textarea限制每行可输入固定个数的字符相关推荐

java输入一个字符串_在java中如何用键盘输入一个数，字符，字符串
一,利用 Scanner 实现从键盘读入integer或float 型数据 1 import java.util.*;2 public classtest {3 public static voidm ...
python的固定有没有固定字符_python每次处理固定个数的字符的方法总结
首先,来看每次处理一个字符的情况,可以有如下方法去实现: 方法一: 代码如下: >>> a='1234567' >>> list(a) ['1', '2', '3' ...
python输出总字符个数_python每次处理固定个数的字符的方法总结
首先,来看每次处理一个字符的情况,可以有如下方法去实现: 方法一: >>> a='1234567' >>> list(a) ['1', '2', '3', '4', ...
限制textarea文本域中输入字符个数（防粘贴）
通常我们需要对用户文本输入进行字符数量上的限制,对于<input type="text" value="" />文本输入域,我们可以通过maxlen ...
Oracle --存储过程，输入不定个数参数
2019独角兽企业重金招聘Python工程师标准>>> 一般来说,写存储过程时,输入的参数个数是固定的,但最近业务需求,输入的参数不固定. 思路:oracle存储过程的输入参数个数. ...
(C++)输入10个整数，将其中最小的数与第一个数对换，把最大的数与最后一个数对换。要求用3个函数实现，分别为输入10个数、进行处理、输出10个数。要求使用指针的方法进行处理。
#include<cstdio> //输入10个整数,将其中最小的数与第一个数对换,把最大的数与最后一个数对换.要求用3个函数实现,分别为输入10个数.进行处理.输出10个数.要求使用指针 ...
ACMNO.41C语言-数字调序有n个整数，使前面各数顺序向后移m个位置，最后m个数变成前面m个数，见图。写一函数：实现以上功能，在主函数中输入n个数和输出调整后的n个数
题目描述有n个整数,使前面各数顺序向后移m个位置,最后m个数变成前面m个数,见图. 写一函数:实现以上功能,在主函数中输入n个数和输出调整后的n个数. 输入输入数据的个数n n个整数移动的位置m ...
ACMNO.37 C语言-数字交换输入10个整数，将其中最小的数与第一个数对换，然后把最大的数与最后一个数对换。写三个函数； ①输入10个数；②进行处理；③输出10个数。
题目描述输入10个整数,将其中最小的数与第一个数对换,然后把最大的数与最后一个数对换. 写三个函数: ①输入10个数:②进行处理:③输出10个数. 输入 10个整数输出整理后的十个数,每个数后跟 ...
ACMNO.30 C语言-宏交换定义一个带参的宏，使两个参数的值互换，并写出程序，输入两个数作为使用宏时的实参。输出已交换后的两个值。
题目描述定义一个带参的宏,使两个参数的值互换,并写出程序,输入两个数作为使用宏时的实参.输出已交换后的两个值. 输入两个数,空格隔开输出交换后的两个数,空格隔开样例输入 1 2 样例输出 2 ...

最新文章

热门文章