在input光标处插入内容，并解决TS报错

在input或者textarea的光标处插入内容，如果是键盘输入倒是好说，直接把光标定位过去，键盘打字就可以了；如果在光标处插入内容呢，稍微费点事，倒是不是问题；但ts总是希望把一切弄得规范一些，所以正常写不行，需要加一些内容规范起来，这一小节，我们来看一下。

目录

1 在input光标插入内容

2 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

3 使用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，团队都熟练使用了，加班还是少不了，线上问题还是一样的出，复盘的时候一个个的都很懂，结果下次还是外甥打灯笼。