1# Using the Input Method in a Custom Edit 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, for example, **CustomInput**. Define a 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 isAttach: boolean = false; 50 private inputController: inputMethod.InputMethodController = inputMethod.getController(); 51 52 build() { 53 Text(this.inputText) // Use the Text component to show text in the custom input box 54 .fontSize(16) 55 .width('100%') 56 .lineHeight(40) 57 .id('customInput') 58 .onBlur(() => { 59 this.off(); 60 }) 61 .height(45) 62 .border({ color: '#554455', radius: 30, width: 1 }) 63 .maxLines(1) 64 .onClick(() => { 65 this.attachAndListener(); // Click the component. 66 }) 67 } 68 69 async attachAndListener() {// Bind and set a listener. 70 focusControl.requestFocus('CustomInput'); 71 await this.inputController.attach(true, { 72 inputAttribute: { 73 textInputType: inputMethod.TextInputType.TEXT, 74 enterKeyType: inputMethod.EnterKeyType.SEARCH 75 } 76 }); 77 if (!this.isAttach) { 78 this.inputController.on('insertText', (text) => { 79 this.inputText += text; 80 }) 81 this.inputController.on('deleteLeft', (length) => { 82 this.inputText = this.inputText.substring(0, this.inputText.length - length); 83 }) 84 this.isAttach = true; 85 } 86 } 87 88 off() { 89 this.isAttach = false; 90 this.inputController.off('insertText') 91 this.inputController.off('deleteLeft') 92 } 93 } 94 ``` 95 964. Import the component to the application UI layout. In this example, the **Index.ets** and **CustomInput.ets** files are in the same directory. 97 98 ```ets 99 import { CustomInput } from './CustomInput'; // Import the component. 100 101 @Entry 102 @Component 103 struct Index { 104 105 build() { 106 Column() { 107 CustomInput() // Use the component. 108 } 109 } 110 } 111 ``` 112 113 ## Effect 114  115 116 117
