How to use native input in uniapp

Uniapp is a cross-platform development framework that can easily package a web application into Android and iOS applications. In Uniapp applications, we can use native input controls through components.

When using Uniapp, we often encounter a problem, that is, we need to use native input controls. For example, we need to enter a date in the input, and we want to use the native date picker instead of using Date picker for H5. In this case, we can use the native event system and uni-app plug-in provided by uniapp to use the native input control.

How to use native input controls?

First of all, in HTML code, we can use the native tag to declare the input box, and bind an id attribute to it so that we can get a reference to the input box later in the code.

Next, we need to obtain the reference to the input box through the id of the element in the JS code, and then bind the event processing function to trigger the display of the native input control through the event.

The following is a sample code:

<template>
  <view>
    <input type="text" :id="'input-' + uid" @focus="onFocus" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        uid: Math.random().toString(36).substr(2, 8),
      };
    },
    methods: {
      onFocus() {
        if (uni.getSystemInfoSync().platform === 'android')) {
          // 显示原生日期选择器
          uni.showDatePicker({
            success: (res) => {
              console.log(res);
            },
          });
        } else if (uni.getSystemInfoSync().platform === 'ios')) {
          // 显示原生时间选择器
          uni.showDatePicker({
            pickerMode: 'time',
            success: (res) => {
              console.log(res);
            },
          });
        }
      },
    },
  };
</script>

In the above code, we first declare an input box in the HTML code, and then obtain the reference of the input box in the JS code and bind it An event handler named 'onFocus'.

In the event handling function, we first obtain the operating system type of the current device through the uni.getSystemInfoSync() method, and then display different native input controls according to different operating system types.

In the above code, when the current device is an Android device, we use the uni.showDatePicker() method to display the native date picker. When the current device is an iOS device, we use uni.showDatePicker( ) method displays the native time picker.

In this way, we can easily use native input controls without being limited to the H5 input box type.

The above is the detailed content of How to use native input in uniapp. For more information, please follow other related articles on the PHP Chinese website!