用typescript写一个汉字输入的按钮
时间: 2023-09-18 10:08:07 浏览: 37
好的,我来给您写一个用 TypeScript 实现的汉字输入按钮:
```typescript
class ChineseInputButton {
private inputField: HTMLInputElement;
private chineseCharacters: string[];
constructor(inputField: HTMLInputElement, chineseCharacters: string[]) {
this.inputField = inputField;
this.chineseCharacters = chineseCharacters;
this.init();
}
private init(): void {
const button = document.createElement('button');
button.textContent = '插入汉字';
button.addEventListener('click', () => {
const randomIndex = Math.floor(Math.random() * this.chineseCharacters.length);
const chineseCharacter = this.chineseCharacters[randomIndex];
this.inputField.value += chineseCharacter;
});
document.body.appendChild(button);
}
}
const inputField = document.getElementById('input-field') as HTMLInputElement;
const chineseCharacters = ['的', '一', '是', '在', '不', '了', '有', '和', '人', '这'];
const chineseInputButton = new ChineseInputButton(inputField, chineseCharacters);
```
这个类的构造函数接收一个 HTMLInputElement 对象和一个包含汉字的字符串数组。在初始化时,它会创建一个按钮,并将按钮添加到页面中。当按钮被点击时,它会从传入的汉字数组中随机选择一个汉字,并将其插入到输入框中。
示例用法:
```html
<input id="input-field" type="text" />
<script src="chinese-input-button.ts"></script>
<script>
const inputField = document.getElementById('input-field');
const chineseCharacters = ['的', '一', '是', '在', '不', '了', '有', '和', '人', '这'];
const chineseInputButton = new ChineseInputButton(inputField, chineseCharacters);
</script>
```
请注意,您需要将上面的 TypeScript 代码编译为 JavaScript 并将其包含在您的 HTML 文件中。