input的应用

cube-input改造

是的，你没看错，这篇文章是对原先大名鼎鼎的cube-ui下的cube-input进行的再改造记录。

---

---

搜索相关配置及“坑”

1. css样式配置：

   /* 隐藏安卓默认的全清除按钮 */		
   input[type="search"]::-webkit-search-cancel-button {    
   	display: none;  
   }
   
   input {
   	-webkit-appearance: none; /* 去除ios下input椭圆形 */	
   }
   

2. “搜索”
   如果希望小键盘右下角变成“搜索”字样，则必须在input外套上一层<form>，但是套上<form>后有一个 跳转的大坑 等着。我百度到的结果是需要添加属性：

   action="javascript:;"
   

3. ios下input收起小键盘页面无法回弹的问题：

   /**
    * input失去焦点后事件
    * - fix 苹果手机ios系统在微信6.7.4版本input拉起小键盘导致页面上移后无法回弹
    * [参考网址](http://www.cnblogs.com/Miracle-ZLZ/p/10030608.html)
    */
    onBlur() {
   	setTimeout(() => {
   	    const scrollHeight =
   	      document.documentElement.scrollTop || document.body.scrollTop || 0;
   	    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
   	 }, 100);
   },
   

4. fastclick造成的ios下input点击失效
   在main.js内修改fastclick配置：

import FastClick from 'fastclick';
FastClick.attach(document.body);
FastClick.prototype.focus = (ele) => { 'use strict'; ele.focus(); }; //修改focus()方法

DEMO

<template>
    <form action="javascript:;" class="form-container">                                                                            
    
        <cube-input                                                
            ref="inputSearch"                                                        
            type="search"                  
            placeholder="请输入关键字" 
            :maxlength="maxlength" 
            :clearable="clearable"
            :disabled="disabled"
            v-model="inputValue" 
            class="form-input"
            @blur="onBlur"      
            @keyup.enter.native="onSubmit"                  
        >
            <template v-slot:prepend>
                <!-- cube-input-clear是cube-ui的样式，等同于右侧的"X"按钮样式 -->
                <img class="cube-input-clear form-input_img" src="static/image/search.png" />                    
            </template>                                        
        </cube-input>
    </form>    
</template>



<script>
const EVENT_INPUT = 'input';  // 输入事件
 
export default {
    name: 'SearchInput',
    props: {
        /** input最大输入长度，默认为20 */
        maxlength: {
            type: Number,
            default: 20
        },

        /** 禁用状态，默认为false */
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            /** 清空样式 */
			clearable: {
				visible: true,
				blurHidden: false
            },

            /** 输入的搜索关键字 */
            inputValue: ''
        };
    },
    methods: {
    	/**
		 * input失去焦点后事件
		 * - fix 苹果手机ios系统在微信6.7.4版本input拉起小键盘导致页面上移后无法回弹
		 * [参考网址](http://www.cnblogs.com/Miracle-ZLZ/p/10030608.html)
		 */
		onBlur() {
		  setTimeout(() => {
		    const scrollHeight =
		      document.documentElement.scrollTop || document.body.scrollTop || 0;
		    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
		  }, 100);
		},
		
        /** 点击了小键盘右下角搜索按钮 */
        onSubmit() {
            this.$emit(EVENT_INPUT, this.inputValue);
        }
    }
};
</script>



<style lang="stylus" scoped>             
    /deep/ .cube-input-field        
        text-align center  /* 文字居中显示 */        
        color #272626            
    .form-input
        height 32px           
        border-radius 16px
        overflow hidden
        background-color #f6f5f5                 
    .form-input_img
        margin-right -5px            
</style>

参考链接

[1] 星等8_8. input type=“search” 实现搜索框
[2] liyaocool Vue 引入fastclick后IOS的input聚焦延迟解决方案 #583

感谢