为什么1221更新之后input分成了两层
发布于 6 年前 作者 leiwan 6263 次浏览 来自 问答

用开发工具调试看层级，一层是wx-input，里面是input。

两个问题，一个是input的z-index太高，如果在wx-input上面盖东西的时候完全有可能把这两个东西分离开

第二个问题，外层的wx-input和里层的input宽度不一致，尤其是如果设置了wx-input的宽度之后，input会更窄。意思是实际的输入区域会比显示区域窄很多，而且还不知道怎么修复……

所以我很好奇，这样做的原因是什么

5 回复

第一个问题，开发者工具上的input的实现和客户端的实现是不一样的，开发者工具只是用一个html input来模拟，z-index过高确实有问题，后续版本fixed掉，不会影响到在手机上的效果。

第二个问题的样式设置是怎么样的？能不能提供详细的demo。

期望的是输入区域的宽度跟你设置在wx-input的宽度是一样的。

我也遇到了你的第二个问题，这个问题你解决了吗?除了设置100%有没有别的解决办法？

这是70%的效果

这是15%的效果

可以明显看出实际输入区和外层wx-input的输入区的不同

需要search-bar外层有个container，只要外面的container的宽度是100%就好

请问您解决了？我也遇到了同样的问题

<view class="search-bar-container">
    <input class="search-bar-input" bindinput="onInput" placeholder-class="search-bar-input-placeholder"
           placeholder="请输入搜索内容" focus="true" value="{{searchKey}}" bindconfirm="completeInput"/>
    <view bindtap="cancelInput" class="search-bar-cancel-button">取消</view>
</view>

.search-bar-container {
    width: 100%;
    height: 80rpx;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f2f2f2;
}

.search-bar-input {
    height: 50rpx;
    width: 70%;/*这里数值该小更明显，建议试试改到15%*/
    background-color: #f2f2f2;
    border-radius: 4px;
    padding-left: 5%;
    padding-right: 5%;
    font-size: 25rpx;
}

.search-bar-cancel-button {
    color: #ff4466;
    width: 10%;
    margin-left: 5%;
    font-size: 28rpx;
    line-height: 50rpx;
}

主要来说就是给input标签设置一个width，指定为百分比形式。大概里面的input会继承这个百分比？而且最重要的问题是我没法设置里面真正输入框的宽度……

回到顶部