1# Using the Input Method in a Custom Edit Box 2<!--Kit: IME Kit--> 3<!--Subsystem: MiscServices--> 4<!--Owner: @illybyy--> 5<!--Designer: @andeszhang--> 6<!--Tester: @murphy1984--> 7<!--Adviser: @zhang_yixin13--> 8 9In the inputmethod framework, use [getController](../reference/apis-ime-kit/js-apis-inputmethod.md#inputmethodgetcontroller9) to obtain the [InputMethodController](../reference/apis-ime-kit/js-apis-inputmethod.md#inputmethodcontroller) instance for binding the input method and listening to various events of the input method application, such as insertion, deletion, selection, and cursor movement. In this way, the input method can be used in the custom edit box, implementing more flexible and free editing operations. 10 11## How to Develop 12 131. 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. 14 15 ```ets 16 import { inputMethod } from '@kit.IMEKit'; 17 18 @Component 19 export struct CustomInput { 20 build() { 21 } 22 } 23 ``` 24 252. In the component, use the **Text** component to show the text in the custom edit box, and the **inputText** state variable to specify the text to display in the text input box. 26 27 ```ets 28 import { inputMethod } from '@kit.IMEKit'; 29 30 @Component 31 export struct CustomInput { 32 @State inputText: string = ''; // Specify the text to display in the text input box. 33 34 build() { 35 Text(this.inputText) // Use the Text component to show the text in the custom edit box. 36 .fontSize(16) 37 .width('100%') 38 .lineHeight(40) 39 .id('customInput') 40 .height(45) 41 .border({ color: '#554455', radius: 30, width: 1 }) 42 .maxLines(1) 43 } 44 } 45 ``` 46 473. 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. 48 49 ```ets 50 import { inputMethod } from '@kit.IMEKit'; 51 52 @Component 53 export struct CustomInput { 54 @State inputText: string = ''; // Specify the text to display in the text input box. 55 private isAttach: boolean = false; 56 private inputController: inputMethod.InputMethodController = inputMethod.getController(); 57 58 build() { 59 Text(this.inputText) // Use the Text component to show the text in the custom edit box. 60 .fontSize(16) 61 .width('100%') 62 .lineHeight(40) 63 .id('customInput') 64 .onBlur(() => { 65 this.off(); 66 }) 67 .height(45) 68 .border({ color: '#554455', radius: 30, width: 1 }) 69 .maxLines(1) 70 .onClick(() => { 71 this.attachAndListener(); // Click the component. 72 }) 73 } 74 75 async attachAndListener() { // Bind and set a listener. 76 focusControl.requestFocus('CustomInput'); 77 try { 78 await this.inputController.attach(true, { 79 inputAttribute: { 80 textInputType: inputMethod.TextInputType.TEXT, 81 enterKeyType: inputMethod.EnterKeyType.SEARCH 82 } 83 }); 84 } catch(err) { 85 console.error(`Failed to attach: code:${err.code}, message:${err.message}`); 86 } 87 if (!this.isAttach) { 88 this.inputController.on('insertText', (text) => { 89 this.inputText += text; 90 }) 91 this.inputController.on('deleteLeft', (length) => { 92 this.inputText = this.inputText.substring(0, this.inputText.length - length); 93 }) 94 this.isAttach = true; 95 } 96 } 97 98 off() { 99 this.isAttach = false; 100 this.inputController.off('insertText'); 101 this.inputController.off('deleteLeft'); 102 } 103 } 104 ``` 105 1064. Import the component to the application UI layout. In this example, the **Index.ets** and **CustomInput.ets** files are in the same directory. 107 108 ```ets 109 import { CustomInput } from './CustomInput'; // Import the component. 110 111 @Entry 112 @Component 113 struct Index { 114 115 build() { 116 Column() { 117 CustomInput() // Use the component. 118 } 119 } 120 } 121 ``` 122 123 ## Effect 124  125
