Input Decimal Limit, List Offset Calculation, Web Request Header Issues, Dialog Width, Web Permissions

[Daily HarmonyOS Next Knowledge] Input Decimal Limit, List Offset Calculation, Web Request Header Issues, Dialog Width, Web Permissions

1. How to Use the inputFilter Property in HarmonyOS TextInput to Restrict Input to Positive Numbers with Two Decimal Places?

How to use the inputFilter property in TextInput to allow only positive numbers with up to two decimal places?

1. Positive numbers with two decimal places. Demo code:

@Entry
@Component
struct TextInputExample {
  @State message: string = '0.3256'
  controller: TextInputController = new TextInputController()
  build() {
    Column() {
      TextInput({placeholder: '请输入内容', text: this.message })
        .width('100%')
        // Numeric input mode with decimal support. Note: inputFilter overrides default text filtering of type(InputType.NUMBER_DECIMAL)
        .type(InputType.NUMBER_DECIMAL)
        .maxLength(11)
        // Explicit regular expression
        .inputFilter('^-?\\d*\\.?\\d{0,2}$', (e) => {
          // ^[0-9]+(.[0-9]{0,2})?$
          // ^-?\\d*\\.?\\d{0,2}$ - This regex allows two decimal places, rejecting invalid inputs like 0.000, 00.10, 001234
          // ^(([1-9]{1}\d*)|([0]{1}))(\.(\d){0,2})?$ - This regex does not work here but may work on other platforms
          // Regex for two decimal places
          console.log('正则表达式-3', JSON.stringify(e))
        })
        .backgroundColor(Color.Red)
    }
  }
}

1. Block emojis and special characters: Use inputFilter with a regex. Example restricting to letters:

TextInput().inputFilter('[a-z]', (e) => { console.log(JSON.stringify(e)) })

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-textinput-V5

2. scroller.currentOffset().yOffset Returns Incorrect Values After Loading More Items in a List

The list monitors scroll distance using scroller.currentOffset(), which works correctly for the first page. However, after loading more items via pull-to-refresh, the reported scroll distance increases abnormally.

Reference Demo:

.onScroll(() => {
  this.tabPosY = this.topAreaHeight - this.scroller.currentOffset().yOffset <= 0 ? 0 : this.topAreaHeight - this.scroller.currentOffset().yOffset
})

3. How to Set Default Headers for Web Component Requests in HarmonyOS

Set headers using the headers parameter in the loadUrl method. This parameter allows attaching HTTP request headers.

Usage: Use the second parameter headers.

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#loadurl

4. Customizing Dialog Width in HarmonyOS

Refer to the width property:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5#ZH-CN_TOPIC_0000001884757950__customdialogcontrolleroptions%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E

5. Are Web Request Permissions Available in HarmonyOS?

Is there an onPermissionRequest callback? Loading a URL that requests location permission does not trigger this callback. Are additional configurations required?

Reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#once

once(type: string, callback: Callback<void>): void

Subscribe to a one-time callback for a specified Web event. Currently, only "webInited" is supported, triggered when the Web engine initializes.

• The Web engine initializes when the first Web component loads in the app. Subsequent Web components do not re-trigger once.
• If the last Web component is destroyed and a new one is loaded, the Web engine re-initializes.

Ensure your web page accesses resources requiring user authorization (e.g., geolocation, camera):

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#ongeolocationshow