entrada del subprograma Wechat uniapp explicación detallada de entrada con punto decimal, entrada de cuadro de entrada que puede ver la contraseña

Dirección de documento del sitio web oficial


1, plantilla

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view>
		<view class="uni-common-mt">
			<view class="uni-form-item uni-column">
				<view class="title">可自动聚焦的input</view>
				<input class="uni-input" focus placeholder="自动获得焦点" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">键盘右下角按钮显示为搜索</view>
				<input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">控制最大输入长度的input</view>
				<input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">实时获取输入值：{
    
    {
    
    inputValue}}</view>
				<input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">控制输入的input</view>
				<input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
			</view>
			<!-- #ifndef MP-BAIDU -->
			<view class="uni-form-item uni-column">
				<view class="title">控制键盘的input</view>
				<input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
			</view>
			<!-- #endif -->
			<view class="uni-form-item uni-column">
				<view class="title">数字输入的input</view>
				<input class="uni-input" type="number" placeholder="这是一个数字输入框" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">密码输入的input</view>
				<input class="uni-input" password type="text" placeholder="这是一个密码输入框" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">带小数点的input</view>
				<input class="uni-input" type="digit" placeholder="带小数点的数字键盘" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">身份证输入的input</view>
				<input class="uni-input" type="idcard" placeholder="身份证输入键盘" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">控制占位符颜色的input</view>
				<input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
			</view>
      <view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view>
				<view class="uni-input-wrapper">
					<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
					<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
				<view class="uni-input-wrapper">
					<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
					<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
						@click="changePassword">&#xe568;</text>
				</view>
			</view>
		</view>
	</view>
</template>

2, guión

<script>
export default {
    
    
    data() {
    
    
        return {
    
    
            title: 'input',
            focus: false,
            inputValue: '',
            showClearIcon: false,
            inputClearValue: '',
            changeValue: '',
            showPassword: true
        }
    },
    methods: {
    
    
        onKeyInput: function(event) {
    
    
            this.inputValue = event.target.value
        },
        replaceInput: function(event) {
    
    
            var value = event.target.value;
            if (value === '11') {
    
    
                this.changeValue = '2';
            }
        },
        hideKeyboard: function(event) {
    
    
            if (event.target.value === '123') {
    
    
                uni.hideKeyboard();
            }
        },
        clearInput: function(event) {
    
    
            this.inputClearValue = event.detail.value;
            if (event.detail.value.length > 0) {
    
    
                this.showClearIcon = true;
            } else {
    
    
                this.showClearIcon = false;
            }
        },
        clearIcon: function() {
    
    
            this.inputClearValue = '';
            this.showClearIcon = false;
        },
        changePassword: function() {
    
    
            this.showPassword = !this.showPassword;
        }
    }
}
</script>

3. Recordatorio
Al comparar los valores numéricos en los cuadros de entrada, dado que el tipo de entrada es una cadena, debe convertirse al tipo numérico Number()
if(Number(this.num1) > Number(this.num2)){ … }