【CSS】用label定位控制输入框提示语,点击input输入框后提示文字上移缩小【兼容JavaScript控制】

1、【基于原生Html浏览器执行的方案】CSS_点击input输入框后提示文字上移缩小_小歪博客-CSDN博客

2、注意：以下基于uni-app【兼容app的方案】uniapp的input标签和浏览器原生的html5标签的属性不一样，因为uni-app是基于二次封装的，为此基于html的方案在uni-app的是行不通的，需重新定制！ 

<template>
    <view class="content">
        <!--        基于动态传参的方式【JavaScript传入props初始化参数】-->
        <view class="group_dynamic">
            <input v-model="value"
                   :style="{fontSize: fontSize,height:inputHeight,paddingLeft:inputPaddingLeft}"
                   :focus="isFocus"
                   @focus="onEventType('focus')"
                   @blur="onEventType('blur')"/>
            <label @click="onEventType('focus')"
                   :style="{fontSize:labelFontSize,left:inputPaddingLeft,top:blurPositionTop}">请输入用户名(动态传参 )</label>
        </view>

        <!--        基于静态传参【基于sass指定固定参数,初始化参数不变】-->
<!--        <view class="group_static">-->
<!--            <input v-model="value"-->
<!--                   :focus="isFocus"-->
<!--                   @focus="onEventTypeFirst('focus')"-->
<!--                   @blur="onEventTypeFirst('blur')"/>-->
<!--            <label-->
<!--                :class="{'input-blur':isInputBlur,'input-focus':isInputFocus}"-->
<!--                @click="onEventType('focus')">请输入用户名(静态传参)</label>-->
<!--        </view>-->

    </view>
</template>

<script>

export default {
    onLoad() {

    },
    props: {
        inputPaddingLeft: {
            type: String,
            default: "10px",
        },
        inputHeight: {
            type: String,
            default: "50px",
        },
        fontSize: {
            type: String,
            default: "16px",
        },
    },
    data() {
        return {
            isInputFocus: false,
            isInputBlur: true,

            value: "",
            blurPositionTop: "25%",
            labelFontSize: this.fontSize,
            isFocus: false,
        };
    },
    methods: {
        onEventType(eventType) {
            if (this.value || eventType === "focus") {
                this.labelFontSize = "5px";
                this.blurPositionTop = "2px";
                this.isFocus = true;
                console.log("======input");
            } else {
                this.labelFontSize = this.fontSize;
                this.blurPositionTop = "30%";
                this.isFocus = false;
                console.log("======blur");
            }
        },

        onEventTypeFirst(eventType) {
            if (this.value || eventType === "focus") {
                this.isInputBlur = false;
                this.isInputFocus = true;
                this.isFocus = true;
                console.log("======input");
            } else {
                this.isInputBlur = true;
                this.isInputFocus = false;
                this.isFocus = false;
                console.log("======blur");
            }
        },
    },
};
</script>

<style lang="scss">

$font_size: 12px;
$position_left: 10px;

.group_static {
    position: relative;

    input {
        background: yellow;
        height: 50px;
        font-size: 16px;
        margin: 0;
        padding: 0 #{$position_left};
    }

    .input-focus {
        position: absolute;
        left: $position_left;
        top: 2px;
        font-size: 5px;
        transition: all .3s;
    }

    .input-blur {
        position: absolute;
        font-size: 16px;
        left: $position_left;
        top: 25%;
        transition: all .3s;
    }

    label:hover {
        cursor: text;
    }
}

.group_dynamic {
    position: relative;
    /**
        基于【动态传入$position_left和$font_size参数】
     */
    input {
        background: yellow;
        margin: 0;
        padding: 0;
    }

    label {
        position: absolute;
        transition: all .3s;

        &:hover {
            cursor: text;
        }
    }
}

</style>