HarmonyOS鸿蒙Next中ArkTS的TextInput输入特定值跳转目标页面

HarmonyOS鸿蒙Next中ArkTS的TextInput输入特定值跳转目标页面

ArkTs中textinput输入特定值，跳转目标页面

视频

https://www.bilibili.com/video/BV1Dm4y187oQ/

import router from '@ohos.router'
import promptAction from '@ohos.promptAction'

@Entry
@Component
struct TextInputPage {
  @State text: string = ''
  controller: TextInputController = new TextInputController()

  build() {
    Column() {
      TextInput({ text: this.text, placeholder: '坚果', controller: this.controller })
        .onChange((value: string) => { //输入内容发生变化时，触发该回调。
          this.text = value
        }).padding(20).margin(20)
        .onSubmit(() => { //按下输入法回车键触发该回调
          if (this.text == "jianguo") {
            router.pushUrl({
              url: "pages/SecondPage" 
            })
          }
        })
        .onCopy((value: string) => { //长按输入框内部区域弹出剪贴板后,点击剪切板复制按钮，触发该回调。value：复制的文本内容。
          promptAction.showToast({ message: value })
        })
        .onCut((value: string) => { //长按输入框内部区域弹出剪贴板后,点击剪切板复制按钮，触发该回调。value：剪切的文本内容。
          promptAction.showToast({ message: value })
        })
        .onPaste((value: string) => { //长按输入框内部区域弹出剪贴板后,点击剪切板复制按钮，触发该回调。value：粘贴的文本内容。
          promptAction.showToast({ message: value })
        })
      Text(this.text)
      Button('跳转')
        .margin(15)
        .onClick(() => {
          if (this.text == "jianguo") {
            router.pushUrl({
              url: "pages/SecondPage"
            })
          }
        })
      Button('将光标移动至第一个字符后')
        .margin(15)
        .onClick(() => {
          // 将光标移动至第一个字符后
          this.controller.caretPosition(1)
        })
    }.width('100%')
  }
}

大家有什么问题，都可以通过公众号“大前端之旅”，与我取得联系。或者加入坚果派。一起学习OpenHarmony/HarmonyOS应用开发。

大家给我的这个文章点个赞吧，谢谢大家。

https://developer.huawei.com/consumer/cn/forum/topic/0204119819737353117?fid=0101587866109860105


更多关于HarmonyOS鸿蒙Next中ArkTS的TextInput输入特定值跳转目标页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

额，问你一个问题，怎么用一个按钮点击事件直接把Text组件的内容复制到粘贴板上？

更多关于HarmonyOS鸿蒙Next中ArkTS的TextInput输入特定值跳转目标页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


应该没这样的操作，要实现的话，可以自己封装一个组件，

onChange((txt)=> { this.message = txt; })

onClick(()=> { pasteboard .getSystemPasteboard() .setData(pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN,this.message)); pasteboard .getSystemPasteboard() .getData((err, val)=>{ console.log(val.getPrimaryText()); }) })

在HarmonyOS鸿蒙Next中，使用ArkTS实现TextInput输入特定值后跳转目标页面，可以通过监听输入内容并触发导航逻辑。以下是一个简单示例：

import { TextInput, Button, Navigator } from '@ohos.arkui';

@Entry
@Component
struct MyComponent {
  @State inputValue: string = '';

  build() {
    Column() {
      TextInput({ placeholder: '输入特定值' })
        .onChange((value: string) => {
          this.inputValue = value;
        })

      Button('跳转')
        .onClick(() => {
          if (this.inputValue === '特定值') {
            Navigator.push({ url: 'pages/TargetPage' });
          }
        })
    }
  }
}

当用户在TextInput中输入“特定值”并点击按钮时，应用将跳转到目标页面。

回到顶部