1# Using PasteButton 2 3<!--Kit: ArkUI--> 4<!--Subsystem: Security--> 5<!--Owner: @harylee--> 6<!--SE: @linshuqing; @hehehe-li--> 7<!--TSE: @leiyuqian--> 8 9The **PasteButton** component comes with the pasteboard (also called clipboard) read privilege, which allows an application to read data from the pasteboard without any prompt information. 10 11After the component integrated into your application is tapped, no authorization dialog box will be displayed when your application reads data from the pasteboard. You can use this component for any application that needs to read data from the pasteboard, while eliminating the pop-up windows. 12 13For example, if a user needs to copy a verification code (received from the Messaging application) to another application, the user has to touch and hold the input box, and select **Paste** from the options displayed. With the **PasteButton** component integrated into your application, the user only needs to tap the **Paste** button. 14 15The following figure shows the effect of **PasteButton** component. 16 17 18 19## Constraints 20 21- The temporary authorization will be automatically revoked when the screen turns off, the application switches to the background, or the application exits. 22 23- During the authorization period, there is no limit on the number of API calls. 24 25- The **PasteButton** component must be visible and legible to users. You need to properly configure the component attributes such as the size and color to prevent authorization failures. If the authorization fails due to invalid component style, check the device error logs. 26 27## How to Develop 28 29The following procedure shows how to make entering a verification code easier: After **Paste** is tapped, the text is pasted to the text box. See the figure above. 30 311. Import the dependency **pasteboard**. 32 33 ```ts 34 import { pasteboard } from '@kit.BasicServicesKit'; 35 ``` 36 372. Add the text boxes and **PasteButton** component. 38 39 **PasteButton** is a button-like component consisting of an icon, text, and background. The background is mandatory, and at least one of the icon and text must be selected. The icon and text cannot be customized. You can only select from the existing options. 40 41 When declaring the API for creating a security component, you can determine whether to pass in parameters. If no parameter is passed in, a component with default icon, text, and background is created. If parameters are passed in, the component is created based on the specified parameters and elements that are not configured are not contained. 42 43 The following example uses the default parameters. For details, see [PasteButton](../../reference/apis-arkui/arkui-ts/ts-security-components-pastebutton.md). In addition, all security components inherit the [Security Component Universal Attributes](../../reference/apis-arkui/arkui-ts/ts-securitycomponent-attributes.md), which can be used to customize styles. 44 45 ```ts 46 import { pasteboard, BusinessError } from '@kit.BasicServicesKit'; 47 48 @Entry 49 @Component 50 struct Index { 51 @State message: string = ''; 52 53 build() { 54 Row() { 55 Column({ space: 10 }) { 56 TextInput({placeholder: 'Please enter the verification code.', text: this.message}) 57 PasteButton() 58 .padding({top: 12, bottom: 12, left: 24, right: 24}) 59 .onClick((event: ClickEvent, result: PasteButtonOnClickResult) => { 60 if (PasteButtonOnClickResult.SUCCESS === result) { 61 pasteboard.getSystemPasteboard().getData((err: BusinessError, pasteData: pasteboard.PasteData) => { 62 if (err) { 63 console.error(`Failed to get paste data. Code is ${err.code}, message is ${err.message}`); 64 return; 65 } 66 // The content is '123456'. 67 this.message = pasteData.getPrimaryText(); 68 }); 69 } 70 }) 71 } 72 .width('100%') 73 } 74 .height('100%') 75 } 76 } 77 ``` 78
