input聚焦时改变位置光标和占位文字残留在原位
发布于 6 年前 作者 tao48 8762 次浏览 来自 问答

wxml

<view class="test">
    <view class="header {{focused ? 'focused' : ''}}">
        <input placeholder="输入框" bindfocus="focusHandler" bindblur="blurHandler"/>
    </view>
</view>

wxss

page {
    height: 100%;
}
 
.test {
    height: 100%;
}
 
.header {
    padding: 50rpx;
    background-color: #ccc;
    transition: padding 0.3s ease;
}
 
.header.focused {
    padding: 0 50rpx;
}

js

Page({
    data: {
        focused: false
    },
 
    focusHandler() {
        this.setData({
            focused: true
        });
    },
 
    blurHandler() {
        this.setData({
            focused: false
        });
    }
});

必须使用 transition 才能重现这个 bug。

iOS 和 Android 真机均可重现，模拟器中无法重现。

回到顶部