鸿蒙HarmonyOS常用开发组件：交互式-input

于 2024-08-14 22:14:59 发布
阅读量535 收藏 7
点赞数 21
分类专栏： HarmonyOS OpenHarmony 鸿蒙 文章标签： harmonyos 华为 学习 前端 html 鸿蒙 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84917132/article/details/141192685
版权
HarmonyOS 同时被 3 个专栏收录
159 篇文章 0 订阅
订阅专栏
OpenHarmony
159 篇文章 0 订阅
订阅专栏
鸿蒙
159 篇文章 0 订阅
订阅专栏

input是交互式组件，用于接收用户数据。其类型可设置为日期、多选框和按钮等。具体用法请参考input API。

创建input组件

在pages/index目录下的hml文件中创建一个input组件。

<!-- xxx.hml -->
<div class="container">       
  <input type="text">             
     Please enter the content  
  </input>
</div>
/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}

设置input类型

通过设置type属性来定义input类型，如将input设置为button、date等。

<!-- xxx.hml -->
<div class="container">
  <div class="div-button">
    <dialog class="dialogClass" id="dialogId">
      <div class="content">
        <text>this is a dialog</text>
      </div>
    </dialog>
    <input class="button" type="button" value="click" onclick="btnclick"></input>
  </div>
  <div class="content">
    <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
  </div>
  <div class="content">
    <input type="date" class="flex" placeholder="Enter data"></input>
  </div>
</div>
/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: #F1F3F5 ;
}
.div-button {
  flex-direction: column;
  align-items: center;
}
.dialogClass{
  width:80%;
  height: 200px;
}
.button {
  margin-top: 30px;
  width: 50%;
}
.content{
  width: 90%;
  height: 150px;
  align-items: center;
  justify-content: center;
}
.flex {
  width: 80%;
  margin-bottom:40px;
}
// xxx.js
export default {
  btnclick(){
    this.$element('dialogId').show()
  },
}

说明

仅当input类型为checkbox和radio时，当前组件选中的属性是checked才生效，默认值为false。

事件绑定

向input组件添加search和translate事件。

<!-- xxx.hml -->
<div class="content">
  <text style="margin-left: -7px;">
    <span>Enter text and then touch and hold what you've entered</span>
  </text>
  <input class="input" type="text" onsearch="search" placeholder="search"> </input>
  <input class="input" type="text" ontranslate="translate" placeholder="translate"> </input>
</div>
/* xxx.css */
.content {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.input {
  margin-top: 50px;
  width: 60%;
  placeholder-color: gray;
}
text{
  width:100%;
  font-size:25px;
  text-align:center;
}
// xxx.js
import promptAction from '@ohos.promptAction'
export default {
  search(e){
    promptAction.showToast({
      message:  e.value,
      duration: 3000,
    });
  },
  translate(e){
    promptAction.showToast({
      message:  e.value,
      duration: 3000,
    });
  }
}

设置输入提示

通过对input组件添加showError方法来提示输入的错误原因。

<!-- xxx.hml -->
<div class="content">
  <input id="input" class="input" type="text"  maxlength="20" placeholder="Please input text" onchange="change">
  </input>
  <input class="button" type="button" value="Submit" onclick="buttonClick"></input>
</div>
/* xxx.css */
.content {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.input {
  width: 80%;
  placeholder-color: gray;
}
.button {
  width: 30%;
  margin-top: 50px;
}
// xxx.js
import promptAction from '@ohos.promptAction' 
 export default { 
   data:{ 
     value:'', 
   }, 
   change(e){ 
     this.value = e.value; 
     promptAction.showToast({ 
     message: "value: " + this.value, 
       duration: 3000, 
      }); 
   }, 
   buttonClick(e){ 
     if(this.value.length > 6){ 
       this.$element("input").showError({        
         error:  'Up to 6 characters are allowed.'       
       }); 
      }else if(this.value.length == 0){ 
        this.$element("input").showError({         
          error:this.value + 'This field cannot be left empty.'       
        }); 
      }else{ 
        promptAction.showToast({ 
          message: "success " 
        }); 
      } 
   }, 
 }

说明

该方法在input类型为text、email、date、time、number和password时生效。

场景示例

根据场景选择不同类型的input输入框，完成信息录入。

<!-- xxx.hml -->
<div class="container">    
  <div class="label-item"> 
    <label>memorandum</label>   
  </div>    
  <div class="label-item">        
    <label class="lab" target="input1">content:</label>        
    <input class="flex" id="input1" placeholder="Enter content" />    
  </div>    
  <div class="label-item">        
    <label class="lab" target="input3">date:</label>        
    <input class="flex" id="input3" type="date" placeholder="Enter data" />    
  </div>    
  <div class="label-item">        
    <label class="lab" target="input4">time:</label>        
    <input class="flex" id="input4" type="time" placeholder="Enter time" />    
  </div>   
  <div class="label-item">        
    <label class="lab" target="checkbox1">Complete:</label>        
    <input class="flex" type="checkbox" id="checkbox1" style="width: 100px;height: 100px;" />    
  </div>    
  <div class="label-item">        
    <input class="flex" type="button" id="button" value="save" onclick="btnclick"/>    
  </div>
</div>
/* xxx.css */
.container { 
  flex-direction: column;
  background-color: #F1F3F5;
}
.label-item {   
  align-items: center;
  border-bottom-width: 1px;border-color: #dddddd;
}
.lab {    
  width: 400px;}
label {    
  padding: 30px;
  font-size: 30px;      
  width: 320px;
  font-family: serif;
  color: #9370d8;
  font-weight: bold;
}
.flex {    
  flex: 1;
}
.textareaPadding {    
  padding-left: 100px;
}
// xxx.js
import promptAction from '@ohos.promptAction';
export default {    
  data: {    
  },    
  onInit() { 
  },   
  btnclick(e) {        
    promptAction.showToast({            
      message:'Saved successfully!'        
    })    
  }
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

点击→【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助！~

 鸿蒙（HarmonyOS NEXT）最新学习路线

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

点击→纯血版全套鸿蒙HarmonyOS学习资料

2.视频学习资料+学习PDF文档

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

HarmonyOS Next 最新全套视频教程

​​

 

 大厂面试必问面试题

​​

鸿蒙南向开发技术

​​

鸿蒙APP开发必备

​​

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

​​

《鸿蒙开发基础》

​​

《鸿蒙开发进阶》

《鸿蒙进阶实战》

​​


点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。 

太空人_喜之郎
关注
专栏目录
HarmonyOS鸿蒙开发指南:基础组件 input开发指导
sybh的博客
01-09 1093
仅当Input类型为checkbox和radio时，当前组件是否选中的属性checked才生效，默认值为false。该方法在Input类型为text、email、date、time、number和password时生效。通过设置type属性来定义Input类型，如将Input设置为button、date等。在pages/index目录下的hml文件中创建一个Input组件。通过对Input组件添加showError方法来提示输入的错误原因。根据场景选择不同类型的Input输入框，完成信息录入。
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5259
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
Harmony OS鸿蒙（JavaScript/JS）获取输入框（input）数据，响应输入事件并且获得参数教程
weixin_49552442的博客
02-03 2257
打开Deveco Studio，Create Project（新建项目）选择Empty Ability，然后点击Next。this.input = inputValue则表明将inputValue（输入框的数据）赋值给input里面。下面在input事件中，给到value：inputValue参数为输入框（input）的数据。其中text组件中的input是变量，@change为绑定输入框改变的事件，见官方文档。其中在data中定义变量：input，且input的值为空。稍等片刻，等待项目创建完毕。
【鸿蒙软件开发】文本输入（TextInput/TextArea）
m0_62599305的博客
10-23 7450
TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。具体用法参考TextInput、TextArea。TextInput({placeholder:'我是提示文本'})TextInput({placeholder:'我是提示文本'})placeholder参数可以设置提示文本。
第九节HarmonyOS 常用基础组件3-TextInput
yyxhzdm的博客
12-02 1243
可以看出，当点击到输入框内时，onEditChange方法回调的isEditing返回true，表示正在编辑输入框。下面是输入123对应的实时输入内容。例如登录账号的时候会有“请输入账号”这样的文本提示，当用户输入内容之后，提示文本就会消失，这种提示功能使用。我们可以给TextInput设置onChange事件，输入文本发生变化时触发回调，下面示例代码中的value为实时获取用户输入的文本信息。，一般输入密码的时候，为了用户密码安全，内容会显示为“......”，针对这种场景，将type属性设置为。
HarmonyOS TextInput基础属性讲解
weixin_45966674的博客
01-25 1269
我们会发现 输入框中的文本一直在变 但name是没有改变的 你用text只是给他个默认值 但输入框内容因为输入改变时 他是不会同步你绑定给text的属性的。做过传功前端项目的朋友 应该都知道 输入框有值后 placeholder就不展示了 因为它只是在没有内容时才提示的。我们做其他项目应该也知道 placeholder 就是在输入框中没有内容时 默认的一个提示信息。然后 我们输入内容 就会触发 onChange 然后我们打印我们绑定的name。
【HarmonyOS】键盘遮挡输入框时，实现输入框显示在键盘上方
Mayism123的博客
08-01 1578
harmonyOS、键盘遮挡input，键盘高度监听。这样就实现输入框显示在键盘上方效果了。
HarmonyOS应用开发者基础题库
12-29
【HarmonyOS应用开发者基础题库】主要涵盖了鸿蒙系统应用开发的基础知识，涉及DevEco Studio集成开发环境、 ArkTS编程语言、应用程序框架以及页面布局设计等方面。 1. **DevEco Studio**：它是华为提供的开发...
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
牛肉胡辣汤
07-19 5892
/ xxx.ets @Entry @Component struct CounterExample { @State value: number = 0 build() { Column() { Counter() { Text(this.value.toString()) }.margin(100) .onInc(() => { this.value++ }) .onDec(() => { this.value-- }) }.width("100%") } }D. 多设备预览时，不支持双向预览功能。
HarmonyOS应用开发实战—登录页面【ArkTS】
一键难忘的博客
11-24 4121
在运行时实例内存隔离的基础上，ArkCompiler通过共享运行实例中的不可变或者不易变的对象、内建代码块、方法字节码等技术手段，优化了并发运行实例的启动性能和内存开销。它的目标是提供更加统一、开放、灵活的操作系统平台，使得开发者能够更轻松地创建跨设备的应用程序，并为用户提供一致的、流畅的使用体验。ArkTS提供了简洁自然的声明式语法、组件化机制、数据-UI自动关联等能力，实现了贴近自然语言，书写效率更高的编程方式，为开发者带来易学、易懂、极简开发的优质体验。这有助于推动开发者社区的参与和生态系统的发展。
HarmonyOS应用开发实战—开箱即用的登录页面3【ArkTS】
一键难忘的博客
12-27 2833
HarmonyOS（鸿蒙操作系统）是华为公司推出的一种分布式操作系统。它被设计为一种全场景、全连接的操作系统，旨在实现在各种设备之间的无缝协同和共享，包括智能手机、平板电脑、智能穿戴、智能家居、车载系统等。HarmonyOS的目标是构建一个统一的、开放的、全场景的操作系统生态系统。 这是我做项目中用到的应该展示页面。 ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能
HarmonyOS实战开发：InputMethodExtensionAbility
2401_84194030的博客
04-24 1012
InputMethodExtensionAbility基于ExtensionAbility框架，用于开发输入法应用......
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 4231
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
鸿蒙开发 组件之间的传值
qq_33067629的博客
05-21 1359
鸿蒙开发组件中传值
【鸿蒙实战开发】组件间的数据传递
HarmonyOS_002的博客
07-09 1887
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
鸿蒙HarmonyOS开发：跨组件层级数据双向同步指导
最新发布
wewq2882的博客
07-28 1175
@Provider和@Consumer用于跨组件层级数据双向同步，可以使得开发者不拘泥于组件层级。 @Provider和@Consumer属于状态管理V2装饰器，所以只能在@ComponentV2中才能使用，在@Component中使用会编译报错。
鸿蒙自定义弹窗中的变量如何传递给页面_harmonyos customdialog 数据传递(1)
2401_84852874的博客
05-13 494
build() {Column() {})@Entry@Component})})build() {Column() {build() {Column() {})@Component@LocalStorageLink(‘inputVal’) inputValue: string = ‘点击’})build() {
鸿蒙HarmonyOS应用开发-自定义实现验证码框_鸿蒙开发字母验证码
2401_84164527的博客
04-12 431
backgroundColor($r(‘app.color.white_80’)) // 设置背景颜色。.backgroundColor(Color.Transparent) // 设置背景颜色为透明。.fontColor(Color.Transparent) // 设置文本颜色为透明。.backgroundColor(Color.Transparent) // 设置背景颜色为透明。.fontColor(Color.Transparent) // 设置文本颜色为透明。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值