在input或者textarea的光标处插入内容,如果是键盘输入倒是好说,直接把光标定位过去,键盘打字就可以了;如果在光标处插入内容呢,稍微费点事,倒是不是问题;但ts总是希望把一切弄得规范一些,所以正常写不行,需要加一些内容规范起来,这一小节,我们来看一下。
目录
2.1 报错信息 'inputBox' is possibly 'null'.ts
2.2 报错信息 Property 'selectionStart' does not exist on type 'HTMLElement'.ts
2.3 报错信息 'cursorPosition' is possibly 'null'.ts
1 在input光标插入内容
例如我们有一个输入框,id定义为 inputBox ,有个按钮,调用一个方法insertText(),代码可以这样写:
<!-- HTML部分 -->
<input type="text" id="inputBox" value="ABCDE">
<button onclick="insertText()">插入文本</button>
// javascript部分
function insertText() {
var inputBox = document.getElementById("inputBox"); // 获取输入框元素
var text = "好"; // 要插入的文本
var cursorPosition = inputBox.selectionStart; // 获取光标位置
var textBeforeCursor = inputBox.value.substring(0, cursorPosition); // 获取光标前的文本
var textAfterCursor = inputBox.value.substring(cursorPosition); // 获取光标后的文本
var newText = textBeforeCursor + text + textAfterCursor; // 组合新的文本
inputBox.value = newText; // 更新输入框的值
}
这里的本质就是实用input组件的 selectionStart 属性来获取当前光标的位置,或者是索引,很简单。
2 TS报错解决
2.1 报错信息 'inputBox' is possibly 'null'.ts
这里说的是inputBox 这个DOM元素,很可能是获取不到的,就会是空,会是null,这在后续的代码中就会带来一些意想不到的问题,所以,我们后续在使用inputBox的时候,应该添加判断,要求inputBox一定是存在的,才能继续向下执行
function insertText() {
var inputBox = document.getElementById("inputBox"); // 获取输入框元素
if (inputBox) {
var text = "好"; // 要插入的文本
var cursorPosition = inputBox.selectionStart; // 获取光标位置
var textBeforeCursor = inputBox.value.substring(0, cursorPosition); // 获取光标前的文本
var textAfterCursor = inputBox.value.substring(cursorPosition); // 获取光标后的文本
var newText = textBeforeCursor + text + textAfterCursor; // 组合新的文本
inputBox.value = newText; // 更新输入框的值
}
}
2.2 报错信息 Property 'selectionStart' does not exist on type 'HTMLElement'.ts
这是因为 TypeScript 类型系统并不知道 <input>
元素具有 selectionStart
和 selectionEnd
这些属性。要解决这个问题,你可以将输入框的类型声明为 HTMLInputElement
,因为这个类型包含了这些属性。修改后的代码为:
function insertText() {
var inputBox = document.getElementById("inputBox") as HTMLInputElement;; // 获取输入框元素
if (inputBox) {
var text = "好"; // 要插入的文本
var cursorPosition = inputBox.selectionStart; // 获取光标位置
var textBeforeCursor = inputBox.value.substring(0, cursorPosition); // 获取光标前的文本
var textAfterCursor = inputBox.value.substring(cursorPosition); // 获取光标后的文本
var newText = textBeforeCursor + text + textAfterCursor; // 组合新的文本
inputBox.value = newText; // 更新输入框的值
}
}
2.3 报错信息 'cursorPosition' is possibly 'null'.ts
这里呢,他又担心获取到的cursorPosition值是空,会是null,那这样后续再利用它获取光标的位置就又可能报错了,所以继续修改代码为
function insertText() {
var inputBox = document.getElementById("inputBox") as HTMLInputElement;; // 获取输入框元素
if (inputBox) {
var text = "好"; // 要插入的文本
var cursorPosition = inputBox.selectionStart || 0; // 获取光标位置
var textBeforeCursor = inputBox.value.substring(0, cursorPosition); // 获取光标前的文本
var textAfterCursor = inputBox.value.substring(cursorPosition); // 获取光标后的文本
var newText = textBeforeCursor + text + textAfterCursor; // 组合新的文本
inputBox.value = newText; // 更新输入框的值
}
}
3 使用ts的好处
通过这么简简单单的一小段代码,就发现了那么多可能会出现的问题,可以说使用ts,能够规避非常多因为JS弱类型,或者是不确定值所带来的问题,使用ts的好处可见一斑。但缺点也有,你越着急写代码,它越给你报错,你越不熟悉,它问题越多。
这还不是重点,重点是你用了ts,团队都熟练使用了,加班还是少不了,线上问题还是一样的出,复盘的时候一个个的都很懂,结果下次还是外甥打灯笼。