Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

Hello everyone! I’m front-end nameless

The problem

In the process of developing H5 active interface, it is inevitable to use the input box. Many Web front-end developers will think of evaluating more time when they hear the requirement of input box, because the input box will have some problems in the compatibility of mobile terminal.

Let’s start with a problem: the keyboard on the mobile end pops up, the input box is blocked, and the user can’t see the input content.

The solution

To solve the problem, ask Baidu:

Sure enough, there was a good article about how to fix the H5 keyboard blocking the input field

Plan 1:

The solution is to use the method element. scrollIntoView to scroll the current Element into the browser’s viewable area. Let’s check the compatibility:

The compatibility of the above query is still relatively good, the results of the actual test down, Android and ios many models are invalid.

Scheme 2:

Baidu’s plan is not working, so let’s think about it ourselves:

Element.scrollIntoView gives us the idea, element. scrollIntoView doesn’t work, we don’t use scrollIntoView, we use scrollTo.

Steps:

  1. We set the page with input to a sliding screen.
  2. Add a div at the bottom of the input page
  3. When we input onFocus, we fill the bottom div with height and then delay scrolling to the bottom of the page.
  4. When we lose focus, we set the height of the bottom div to 0

This scheme should fit well in theory according to the implementation steps.

Start by adding the code: We add class directly to the root node of the HTML to distinguish between mobile and PC, and androd and ios

      function isMobile() {
            var flag = navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS |Symbian|Windows Phone)/i
            );
            if (flag) {
                return true;
            }
            return false;
        };

        function isDeviceIos() {
            var ua = window.navigator.userAgent.toLowerCase();
            if (/iphone|ipad|ipod/.test(ua)) {
                return true;
            } else if (/android/.test(ua)) {
                // bridge = new AndroidBridge(this.initial.bind(this));
            }
            return false;
        }

        if (isMobile()) {
            document.body.classList.add("is-mobile");
            if (isDeviceIos()) {
                document.body.classList.add("is-ios"); }}else {
            document.body.classList.add("is-pc");
        }
Copy the code

The dom structure:


    handleOnFocus = () = > {
        const isMob = isMobile();
        this.setState({
            placeholder: ' '});if (isMob) {
            window.setTimeout(() = > {
                const scroll = this.scrollRef.current;
                if (scroll) {
                    // Encapsulate the component to the bottom, which is the scrollTo methodscroll.scrollToBottom(); }},0); }};render() {
    
        return (
            <Scroll className="sc-content" ref={this.scrollRef}>
                    <Input onChange={this.setDes} ref={this.inputRef} placeholder={placeholder} className="cur-input" onFocus={this.handleOnFocus} maxLength="10" />
                    <div className="test-des">Test text</div>
                    <div className="margin-bottom" />
            </Scroll>
        );
    }
Copy the code

CSS combination

.is-mobile {
    .cur-input:focus ~ .margin-bottom {
        height: 2.5 rem;
    }
    &.is-ios {
        .cur-input:focus ~ .margin-bottom {
            height: 0; }}}Copy the code

Blur () : The mobile terminal listens to the KeyboardDown event and sends a notification to H5. H5 receives the event and triggers input.blur().

    componentDidMount = () = > {
        // Listen for the keyboardDown event from the mobile
        this.keyboardDownListener = addKeyboardDown(this.handleKeyboardDown)
    }
    
      handleKeyboardDown = () = > {
        // Actively remove focus
        const inputRef = this.inputRef.current;
        if(inputRef) { inputRef.blur(); }}Copy the code

Conclusion:

This article mainly records some problems and solutions encountered in the work, we have a good plan, see the comment area! Give it a thumbs up and support it.