{"id":102964,"date":"2025-03-24T16:45:47","date_gmt":"2025-03-24T12:15:47","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-to-use-harmonyos-next-arkui-textinput-component-4cpp\/"},"modified":"2025-03-24T16:45:47","modified_gmt":"2025-03-24T12:15:47","slug":"how-to-use-harmonyos-next-arkui-textinput-component-4cpp","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-to-use-harmonyos-next-arkui-textinput-component-4cpp\/","title":{"rendered":"\u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0627\u0632 Harmonyos Next \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f &#8211; Arkui: TextInput Component\u061f"},"content":{"rendered":"<div data-article-id=\"2353542\" id=\"article-body\">\n<p>\u0645\u0624\u0644\u0641\u0647 TextInput \u0628\u0647 \u0637\u0648\u0631 \u06af\u0633\u062a\u0631\u062f\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0645\u062a\u0646 \u062a\u06a9 \u062e\u0637 \u0645\u0627\u0646\u0646\u062f \u0631\u0645\u0632\u0647\u0627\u06cc \u0639\u0628\u0648\u0631 \u062d\u0633\u0627\u0628 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u060c \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\uf06cPlaceholder \uff1a \u0641\u0648\u0631\u06cc \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<br \/>text \uff1a \u0645\u062a\u0646 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<br \/>\uf06c \u06a9\u0646\u062a\u0631\u0644\u0631 \uff1a \u06a9\u0646\u062a\u0631\u0644\u0631 TextInput \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/p>\n<p>\u0646\u0648\u0639 \u0648\u0631\u0648\u062f\u06cc \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>.type(value: InputType)\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0646\u0648\u0639 \u0634\u0645\u0627\u0631\u0634 \u0648\u0631\u0648\u062f\u06cc:<br \/>&#8211; inputtype.normal \uff1a \u062d\u0627\u0644\u062a \u0648\u0631\u0648\u062f\u06cc \u0627\u0635\u0644\u06cc. \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u0634\u0645\u0627\u0631\u0647 \u0647\u0627 \u060c \u062d\u0631\u0648\u0641 \u060c \u062a\u0623\u06a9\u06cc\u062f\u0627\u062a \u060c \u0641\u0636\u0627\u0647\u0627 \u0648 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u062e\u0627\u0635 \u0631\u0627 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f.<br \/>&#8211; inputtype.password \uff1a \u062d\u0627\u0644\u062a \u0648\u0631\u0648\u062f\u06cc \u0631\u0645\u0632 \u0639\u0628\u0648\u0631.<br \/>&#8211; inputtype. \u0627\u06cc\u0645\u06cc\u0644: \u062d\u0627\u0644\u062a \u0648\u0631\u0648\u062f\u06cc \u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644.<br \/>&#8211; inputtype.number \uff1a \u062d\u0627\u0644\u062a \u0648\u0631\u0648\u062f\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u062e\u0627\u0644\u0635.<\/p>\n<p>\u0645\u062a\u0646 \u0648\u0631\u0648\u062f\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f<br \/>\u0647\u0646\u06af\u0627\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u062a\u0646 \u0648\u0631\u0648\u062f\u06cc \u060c \u0631\u0648\u06cc\u062f\u0627\u062f OnChange \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>.onChange(callback: EditableTextOnChangeCallback)\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u062f: TextInputPage<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>@Entry\n@Component\nstruct TextInputPage {\n  @State message: string = 'TextInput Component';\n  @State phone:string='';\n\n  build() {\n    Column({space:6}) {\n      Text(this.message)\n        .fontSize(30)\n        .fontWeight(FontWeight.Bold)\n\n      TextInput({placeholder:'Please enter your account'})\n      TextInput({text:'Set initial value'})\n      TextInput({placeholder:'Please input a password'})\n        .type(InputType.Password)\n      TextInput({placeholder:'Please enter your phone number'})\n        .type(InputType.Number)\n        .onChange((value:string)=&gt;{\n          this.phone=value\n        })\n      Text('The phone number is: '+this.phone)\n    }\n    .height('100%')\n    .width('100%')\n  }\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0648\u0642\u062a\u06cc \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 InputCounterOptions \u0627\u0632 \u0622\u0633\u062a\u0627\u0646\u0647 \u0641\u0631\u0627\u062a\u0631 \u0631\u0648\u062f \u060c \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>showCounter(value: boolean, options?: InputCounterOptions)\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>&#8211; \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0635\u062d\u06cc\u062d \u0627\u0633\u062a \u060c \u0645\u06cc \u062a\u0648\u0627\u0646 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f. \u062c\u0639\u0628\u0647 \u0645\u062a\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0634\u0627\u062e\u0635 \u0634\u0645\u0627\u0631\u0634 \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f \u060c \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0631\u0627\u0628\u0637\u0647 \u0628\u0627 \u0637\u0648\u0644 \u062d\u062f\u0627\u06a9\u062b\u0631 (\u062a\u0646\u0638\u06cc\u0645 \u062d\u062f\u0627\u06a9\u062b\u0631 \u062d\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f. \u0627\u062b\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u060c \u062a\u0639\u062f\u0627\u062f \u0641\u0639\u0644\u06cc \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631 \u062d\u062f\u0627\u06a9\u062b\u0631 \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f.<br \/>&#8211; \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u062d\u062f\u0627\u06a9\u062b\u0631 \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u0636\u0631\u0628 \u0634\u062f\u0647 \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631\u0635\u062f \u0627\u0633\u062a \u060c \u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0647\u0646\u06af\u0627\u0645 \u062a\u0646\u0638\u06cc\u0645 \u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u060c InputCounterOptions \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0646\u06a9\u0646\u062f \u060c \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0648\u0631\u0648\u062f\u06cc \u0641\u0639\u0644\u06cc \u0627\u0632 \u062d\u062f\u0627\u06a9\u062b\u0631 \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0628\u0627\u0634\u062f \u060c \u0634\u0627\u062e\u0635 \u0645\u0631\u0632 \u0648 \u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u0642\u0631\u0645\u0632 \u0645\u06cc \u0634\u0648\u062f. \u06a9\u0627\u0631\u0628\u0631 \u0647\u0645 \u0645\u0642\u062f\u0627\u0631 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0631\u0627 \u062f\u0631 True \u0648 InputCounterOptions \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u0622\u0633\u062a\u0627\u0646\u0647 \u062f\u0631 \u0645\u062d\u062f\u0648\u062f\u0647 \u0645\u0639\u062a\u0628\u0631 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f \u0648 \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0648\u0631\u0648\u062f\u06cc \u0627\u0632 \u062d\u062f\u0627\u06a9\u062b\u0631 \u062a\u0639\u062f\u0627\u062f \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0641\u0631\u0627\u062a\u0631 \u0645\u06cc \u0631\u0648\u062f \u060c \u0634\u0627\u062e\u0635 \u0645\u0631\u0632 \u0648 \u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u0642\u0631\u0645\u0632 \u0645\u06cc \u0634\u0648\u062f \u0648 \u062c\u0639\u0628\u0647 \u062a\u06a9\u0627\u0646 \u0645\u06cc \u062e\u0648\u0631\u062f. \u0627\u06af\u0631 HighlightBorder \u0631\u0648\u06cc False \u062a\u0646\u0638\u06cc\u0645 \u0634\u0648\u062f \u060c \u0645\u0631\u0632 \u0642\u0631\u0645\u0632 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f \u060c \u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0628\u0647 \u0631\u0646\u06af \u0642\u0631\u0645\u0632 \u0648 \u0642\u0627\u0628 \u062a\u06a9\u0627\u0646 \u0645\u06cc \u062e\u0648\u0631\u062f.<br \/>creath \u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u062f\u0631 \u062d\u0627\u0644\u062a \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc \u0648 \u062d\u0627\u0644\u062a \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u062f: \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u062d\u062f\u0627\u06a9\u062b\u0631 \u060c \u0646\u0645\u0627\u06cc\u0634 \u0648 \u0646\u0645\u0627\u06cc\u0634\u06af\u0627\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>@Entry\n@Component\nstruct TextInputPage2 {\n  @State text: string = '';\n  controller: TextInputController = new TextInputController();\n\n  build() {\n    Column() {\n      TextInput({ text: this.text, controller: this.controller })\n        .placeholderFont({ size: 16, weight: 400 })\n        .width(336)\n        .height(56)\n        .maxLength(6)\n        .showUnderline(true)\n        .showCounter(true,\n        \/\/The display effect of the counter is the current number of characters input by the user divided by the maximum character limit. The maximum character limit is set through the maxLength() interface.\n          { thresholdPercentage: 50, highlightBorder: true })\n          \/\/If the user's current input character count reaches the maximum character limit multiplied by 50% (threshold percentage). The character counter displays.\n          \/\/When the user sets highlightBorder to false, configure to remove the red border. When this parameter is not set, it defaults to true.\n        .onChange((value: string) =&gt; {\n          this.text = value;\n        })\n    }.width('100%').height('100%').backgroundColor('#F1F3F5')\n  }\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0624\u0644\u0641\u0647 TextInput \u0628\u0647 \u0637\u0648\u0631 \u06af\u0633\u062a\u0631\u062f\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0645\u062a\u0646 \u062a\u06a9 \u062e\u0637 \u0645\u0627\u0646\u0646\u062f \u0631\u0645\u0632\u0647\u0627\u06cc \u0639\u0628\u0648\u0631 \u062d\u0633\u0627\u0628 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u060c \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController}) \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f \uf06cPlaceholder \uff1a \u0641\u0648\u0631\u06cc \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062ftext \uff1a \u0645\u062a\u0646 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":102965,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-102964","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/102964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=102964"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/102964\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/102965"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=102964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=102964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=102964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}