HarmonyOS 鸿蒙Next 想要实现TextInput组件的光标一直展示?
HarmonyOS 鸿蒙Next 想要实现TextInput组件的光标一直展示? 我现在做的系统键盘和自定义键盘切换,输入的内容可以传给上面的TextInput,但是光标展示不出来的!有啥办法吗?
想要上面的TextInput一直展示光标,或者有什么办法可以绘制一个光标。
import { inputMethod } from '@kit.IMEKit';
@Entry
@Component
struct TestPage {
@State codeText: string = "";
private readonly verifyID: string = "keyboard";
private readonly keyboardSystemID: string = "keyboardSystemID";
private readonly keyboardCustomID: string = "keyboardCustomID";
private inputController: inputMethod.InputMethodController = inputMethod.getController();
private textConfig: inputMethod.TextConfig = {
inputAttribute: {
textInputType: inputMethod.TextInputType.TEXT,
enterKeyType: inputMethod.EnterKeyType.NONE
},
};
private isListen: boolean = false;
controller: SearchController = new SearchController()
private keyboardSystem: boolean = false;
private keyboardCustom: boolean = true;
private keyboardType: boolean = true
build() {
Column() {
TextInput({ placeholder: '请输入', text: this.codeText })
.onClick(() => {
if (this.keyboardType) {
this.getUIContext().getFocusController().requestFocus(this.keyboardSystemID)
} else {
this.getUIContext().getFocusController().requestFocus(this.keyboardCustomID)
}
})
Text('中文键盘')
.width(100)
.height(50)
.textAlign(TextAlign.Center)
.border({ width: 1, color: '#C0C0C0' })
.defaultFocus(this.keyboardSystem)
.onFocus(() => {
this.attachAndListen();
})
.onBlur(() => {
this.off();
})
.onClick(() => {
this.controller.stopEditing()
this.attachAndListen();
})
.id(this.keyboardSystemID)
Stack() {
TextInput({ controller: this.controller, text: '股票键盘' })
.caretColor('#00000000')
.border({ width: 1, color: '#C0C0C0', radius: 0 })
.defaultFocus(this.keyboardCustom)
.width(100)
.height(50)
.backgroundColor('#00000000')
.customKeyboard(this.CustomKeyboardBuilder())
.onClick(() => {
focusControl.requestFocus(this.verifyID);
})
.id(this.keyboardCustomID)
}
}
}
async attachAndListen(): Promise<void> {
focusControl.requestFocus(this.verifyID);
await this.inputController.attach(true, this.textConfig);
this.listen();
}
listen() {
if (this.isListen) {
return;
}
this.inputController.on("insertText", (text: string) => {
this.codeText += text;
})
this.inputController.on("deleteLeft", (length: number) => {
this.codeText = this.codeText.substring(0, this.codeText.length - 1);
})
this.isListen = true;
}
off(): void {
this.inputController.off("insertText");
this.inputController.off("deleteLeft");
this.isListen = false;
}
// 自定义键盘组件
@Builder
CustomKeyboardBuilder() {
Column() {
Button('x').onClick(() => {
// 关闭自定义键盘
this.controller.stopEditing()
})
Grid() {
ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
GridItem() {
Button(item + "")
.width(110).onClick(() => {
this.codeText += item
})
}
})
}.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
}.backgroundColor(Color.Gray)
}
}
更多关于HarmonyOS 鸿蒙Next 想要实现TextInput组件的光标一直展示?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
可以试试customKeyboard直接绑定,可以来回切换,光标不会消失
// xxx.ets
@Entry
@Component
struct TextInputExample {
controller: TextInputController = new TextInputController()
@State inputValue: string = ""
@State show:boolean = false
// 自定义键盘组件
@Builder CustomKeyboardBuilder() {
Column() {
Button('x').onClick(() => {
// 关闭自定义键盘
this.controller.stopEditing()
this.show = !this.show
})
Grid() {
ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item:number|string) => {
GridItem() {
Button(item + "").width(110).onClick(() => {
this.inputValue += item
})
}
})
}.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
}.backgroundColor(Color.Gray)
}
build() {
Column() {
TextInput({ controller: this.controller, text: $$this.inputValue })
// 绑定自定义键盘
.customKeyboard(this.show?this.CustomKeyboardBuilder(): undefined).margin(10).border({ width: 1 }).height('48vp')
Button("qiehuan")
.onClick(()=>{
this.show = !this.show
})
}
}
}
更多关于HarmonyOS 鸿蒙Next 想要实现TextInput组件的光标一直展示?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
这个办法好!但是有个小问题:自定义键盘应该可以根据光标在其后面添加输入的内容,但是貌似只能添加在后面,有什么办法解决嘛~
.onClick(() => {
this.inputValue += item
})
我等会看看,感觉可以用splice
插入,不用+
拼接,稍后我试一下,
好~我也想想,
这种实现方式还有问题: 我输入的字符串,不可以在已经展示的字符串的中间插入内容
只能往后添加
在HarmonyOS(鸿蒙Next)中,若要让TextInput
组件的光标一直展示,可以通过设置caretHidden
属性来实现。caretHidden
属性控制光标的显示与隐藏,默认值为false
,即光标在焦点时显示。若希望光标一直展示,即使TextInput
失去焦点,可以将caretHidden
属性设置为false
,并确保TextInput
始终处于可编辑状态。
示例代码:
import { TextInput } from '@ohos/text';
import { UIAbility } from '@ohos.app.ability.UIAbility';
export default class EntryAbility extends UIAbility {
onCreate() {
let textInput = new TextInput();
textInput.caretHidden = false; // 确保光标一直显示
// 其他配置...
}
}
通过这种方式,TextInput
组件的光标将一直展示。
在HarmonyOS鸿蒙Next中,要实现TextInput
组件的光标一直展示,可以通过设置TextInput
的caretColor
属性来控制光标颜色,并确保TextInput
处于聚焦状态。可以通过focusable(true)
和requestFocus()
方法确保组件始终处于聚焦状态。示例代码如下:
TextInput()
.caretColor(Color.Blue) // 设置光标颜色
.focusable(true) // 确保组件可聚焦
.onAppear(() => {
this.requestFocus(); // 组件出现时请求聚焦
})
这样,TextInput
组件的光标将一直显示。