什么是 @beisen/upaas-textboxrange
@beisen/upaas-textboxrange 是一款前端开发工具库，它为文本框提供了各种范围选择、限制和计算等功能。
该工具库可帮助开发者在文本框输入时，控制输入内容的范围，筛选非法字符，以及统计输入字符等功能。
安装
进入你的项目目录，然后运行以下指令进行安装：
npm install @beisen/upaas-textboxrange --save
使用
在需要使用 @beisen/upaas-textboxrange 的文件中，添加如下的语句：
import TextboxRange from '@beisen/upaas-textboxrange';
然后实例化 TextboxRange 进行使用。
实例化 TextboxRange
要实例化 TextboxRange，你首先需要获取文本框的 DOM 节点，然后使用如下的语句：
const textbox = document.getElementById('my-textbox');
const textboxRange = new TextboxRange(textbox);这段代码将会实例化一个 TextboxRange 对象，并将它连接到一个 id 为 'my-textbox' 的文本框上。
选择文本范围
要选择文本范围，你可以使用 selectRange() 方法，这样将会选择从 start（起始位置） 到 end（结束位置）之间的文本：
-- -------------------- ---- ------- -- ------ --------------------------- ---------------------- -- --- - --- --------------------------- --- -- --- - --- --- --- - -------------------- - -- ---------------------------- - -- -----
限制输入长度
要限制文本框中输入的字符数量，你可以使用 limitInput() 方法：
// 限制最多输入 20 个字符 textboxRange.limitInput(20);
筛选非法字符
如果你需要筛选或过滤文本框中输入的非法字符，你可以使用 filterInput() 方法，例如，下面的代码将屏蔽文本框中的空格：
textboxRange.filterInput((value) => {
return value.replace(/\s/g, '');
});统计输入字符
你可以使用 countInput() 方法，来计算文本框中输入的字符的数量：
textbox.addEventListener('input', () => {
let count = textboxRange.countInput();
console.log(count);
});示例代码
以下是一段完整的示例代码：
-- -------------------- ---- ------- ------ ------------ ---- ----------------------------- ----- ------- - -------------------------------------- ----- ------------ - --- ---------------------- -- ------ ----------------------------- -- ------ -------------------------------- -- - ------ -------------------- ---- --- -- ------ --------------------------------- -- -- - --- ----- - -------------------------- ------------------- --- -- ------ --------------------------- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff481e8991b448ddc1e