# oh_clearableinput

**Repository Path**: droidzxy/oh_clearableinput

## Basic Information

- **Project Name**: oh_clearableinput
- **Description**: OpenHarmony自定义组件ClearableInput - 带清除图标的文本框，Keyboard - 可输入字符和数字的软键盘。
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 3
- **Created**: 2021-08-12
- **Last Updated**: 2025-04-11

## Categories & Tags

**Categories**: harmonyos-edit-text

**Tags**: None

## README

# OhClearableInput

#### 组件介绍
-   本示例包含了两个OpenHarmony自定义组件，一个是ClearableInput，另一个是Keyboard。

    **ClearableInput** 定义了一个带清空图标的文本输入框。
    
    **Keyboard** 定义了一个软键盘，可以输入数字和字符。

#### ClearableInput 调用方法
 ```
<element name="clearableinput" src="../clearableinput/clearableinput.hml"></element>
<div class="rootcontainer">
    <div class="container">
        <text class="title" >Login</text>
        <clearableinput style="width: 90%;" tips="username" inputValue="{{username}}" onfocus="onFocusName" @event-clear="clearUsernameClicked"></clearableinput>
        <clearableinput style="width: 90%;margin-top: 15px;" tips="password" inputValue="{{password}}" inputType="password" onfocus="onFocusPassword" @event-clear="clearPasswordClicked"></clearableinput>
    </div>
</div>
 ```
#### ClearableInput 参数介绍
| **参数**                      | **含义**                      |
| :-------------------------: | :------------------------------- |
| tips                        | 提示文本的内容             | 
| inputValue                        | 文本框内的值          | 
| event-clear                        | 点击清空按钮的事件             | 


#### Keyboard 调用方法
 ```
<element name="keyboard" src="../keyboard/keyboard.hml"></element>
<div class="rootcontainer">
    <keyboard @event-keyinput="keyClicked" @event-keyback="keybackClicked" @event-hideboard="hideBoard" showattr="{{visibility}}"></keyboard>
</div>
 ```
#### Keyboard 参数介绍
| **参数**                      | **含义**                      |
| :-------------------------: | :------------------------------- |
| showattr                        | 软键盘是否显示             | 
| event-keyinput                        | 点击字符数字按键的事件          | 
| event-keyback                      | 点击删除按钮的事件             | 
| event-hideboard                      | 点击隐藏按钮的事件             | 



#### 效果演示

-   带删除图标的文本框
    
![效果演示](./screenshots/device/login.png)

-   支持字符和数字输入的软键盘
    
![效果演示](./screenshots/device/keyboard.png)

-   信息输入界面
    
![效果演示](./screenshots/device/inputtext.png)

-   预览动态图
    
![效果演示](./screenshots/device/example.gif)