1# Implementing a Custom Text Input Box 2 3You can use [getController](../reference/apis-ime-kit/js-apis-inputmethod.md#inputmethodgetcontroller9) to obtain an [InputMethodController](../reference/apis-ime-kit/js-apis-inputmethod.md#inputmethodcontroller) instance, and implement a custom text input box by binding the **InputMethodController** instance to an input method and listen for text input operations, such as text insertion, deletion, selection, and cursor movement. 4 5## How to Develop 6 71. In your project in DevEco Studio, create an .ets file and name it the name of the target custom component. In this example, the file is named **CustomInput**. Define the target custom component in the file, and import **inputMethod** from **@kit.IMEKit**. 8 9 ```ets 10 import { inputMethod } from '@kit.IMEKit'; 11 12 @Component 13 export struct CustomInput { 14 build() { 15 } 16 } 17 ``` 18 192. In the component, use the **\<Text>** component to show text in the text input box, and the **inputText** state variable to specify the text to display in the text input box. 20 21 ```ets 22 import { inputMethod } from '@kit.IMEKit'; 23 24 @Component 25 export struct CustomInput { 26 @State inputText: string = ''; // Specify the text to display in the text input box. 27 28 build() { 29 Text(this.inputText) // Use the <Text> component to show text in the text input box 30 .fontSize(16) 31 .width('100%') 32 .lineHeight(40) 33 .id('customInput') 34 .height(45) 35 .border({ color: '#554455', radius: 30, width: 1 }) 36 .maxLines(1) 37 } 38 } 39 ``` 40 413. Obtain an **inputMethodController** instance from the component, call the **attach** API of the instance to bind and start the soft keyboard when the text input box is clicked, and register listeners for text input operations, such as listeners for text insertion and removal in this example. 42 43 ```ets 44 import { inputMethod } from '@kit.IMEKit'; 45 46 @Component 47 export struct CustomInput { 48 @State inputText: string = ''; // Specify the text to display in the text input box. 49 private inputController: inputMethod.InputMethodController = inputMethod.getController(); 50 51 build() { 52 Text(this.inputText) // Use the <Text> component to show text in the text input box 53 .fontSize(16) 54 .width('100%') 55 .lineHeight(40) 56 .id('customInput') 57 .height(45) 58 .border({ color: '#554455', radius: 30, width: 1 }) 59 .maxLines(1) 60 .onClick(()=>{ 61 this.attachAndListener(); // Click the component. 62 }) 63 } 64 65 async attachAndListener() {// Bind and set a listener. 66 focusControl.requestFocus('CustomInput'); 67 await this.inputController.attach(true, { 68 inputAttribute: { 69 textInputType: inputMethod.TextInputType.TEXT, 70 enterKeyType: inputMethod.EnterKeyType.SEARCH 71 } 72 }); 73 this.inputController.on('insertText', (text) => { 74 this.inputText += text; 75 }) 76 this.inputController.on('deleteLeft', (length) => { 77 this.inputText = this.inputText.substring(0, this.inputText.length - length); 78 }) 79 } 80 } 81 ``` 82 834. Import the component to the application UI layout. In this example, the **Index.ets** and **CustomInput.ets** files are in the same directory. 84 85 ```ets 86 import { CustomInput } from './CustomInput'; // Import the component. 87 88 @Entry 89 @Component 90 struct Index { 91 92 build() { 93 Column() { 94 CustomInput() // Use the component. 95 } 96 } 97 } 98 ``` 99