The body of the

Input box

In this issue we have come to the last part of the click-and-pop input box structure, the input box section, where the requirements are:

  1. Appears above the mask layer
  2. Position fits the machine pop-up keyboard
  3. Auto focus when it appears

Check the interface

Let’s first look at the open interfaces of the Field component and focus on a few more specific interfaces

  • Value: indicates the entered value

    Because the user uses the applet in the rendering layer, but further processing of the data needs to be in the logical layer. Therefore, it is often necessary to pass user input from the render layer through events to the logic layer

    However, we can simplify the above logic by binding model:value=”{{todoTitle}}” in both directions to modify the logic layer directly on the input of the rendering layer

  • Bind :focus: triggered when the input box is focused

    The callback parameter of this event contains event.detail.height, which is the pop-up keyboard height, which will help us to achieve auto focus and achieve the input box position to fit the local pop-up keyboard

Together with some specific details, the final use of the Field component interface is as follows:

<van-field
  model:value="{{ todoTitle }}"
  focus="{{ true }}"
  placeholder="What are you going to do?"
  is-link
  arrow-direction="up"
  left-icon="circle"
  confirm-hold
  adjust-position="{{ false }}"
  bind:focus="adjustPosition"
/>
Copy the code

Realization of specific requirements

  1. Appears above the mask layer

    Implementing the requirements that appear inside the mask layer is relatively simple. The Overlay component opens up default slots that allow input boxes to be embedded directly inside the Overlay component

  2. Position fits the machine pop-up keyboard

  3. Auto focus when it appears

    The position of the input box fits the local keyboard and the auto focus when the input box appears, which I think can be achieved by using the bind: Focus event mentioned earlier

The following is the code to realize the three requirements of the input box (since the field component uses many interfaces, I split the positioning and size styles into an outer view for the sake of readability of the code)

  • WXML

    <van-overlay
  show="{{ showOverlay }}"
  bind:click="onClickHide"
>
  <view
    class="input-wrap"
    style="bottom: {{ keyboardHeight }}px ! important;"
  >
    <van-field
      model:value="{{ todoTitle }}"
      focus="{{ true }}"
      placeholder="What are you going to do?"
      is-link
      arrow-direction="up"
      left-icon="circle"
      confirm-hold
      adjust-position="{{ false }}"
      bind:focus="adjustPosition"
    />
  </view>
</van-overlay>
Copy the code

  • WXSS

    .input-wrap {
  width: 100% ! important;
  position: fixed ! important;
}
Copy the code

  • JavaScript

    adjustPosition: function (e) {
  this.setData({
    keyboardHeight: e.detail.height
  });
},
Copy the code

The problem

There was a problem: when we clicked the button to create a mask layer, the native keyboard would not pop up, and the input field would be at the bottom of the page, obscured by the tabbar below. That is, the keyboard does not pop up and its height is not obtained

The solution

We can type log in the focus trigger event, and the result is shown below

Considering the timing when the event is triggered, we can conclude that even when the field component is display: None, the focus event will be triggered immediately when the page is entered, but the keyboard will not pop up, so the keyboard height obtained by the focus event is 0

My solution to this problem was to initially set the field component’s auto-focus interface focus to false, and then set focus to true when the cover layer event occurs: onClickShow

But there is one small detail: the setting of the Focus interface from False to true needs to be placed in a timer setTimeout to achieve the desired logic, that is, after obtaining the height of the local pop-up keyboard, the position of the input box should be set directly above the pop-up keyboard

onClickShow: function () {
  this.setData({
    showOverlay:!this.data.showOverlay,
  }, () = > {
    setTimeout(() = > {
      this.setData({
        inputFocus:!this.data.inputFocus
      })
    }, 100);
  });
}
Copy the code

Improved effect:

trailer

Click the popup input box structure optimization

Since then, our click-and-pop input box structure has taken shape, but its usability is still a long way from where we want it to be. In the next installment, we will further optimize this structure based on the existing ones 🙂