微信小程序 input输入框键盘d出使得布局上移问题

<view class="product-remark">

<input placeholder="出货备注" value="{{inputRemark}}" bindinput="onInputRemark" class="product-remark" maxlength="100" cursor-spacing='100'/>

</view>

最近在研究小程序云开发，想做一个在搜索框输入姓名，然后返回该姓名的相关信息，当然程序不可能一触而就，首先得把大项目分解为小项目，逐一破解。

入正题

首先得有一个搜索框和按钮

wxml文件

wxml文件

input的四种属性，我选择了第二种属性，键盘触发时自动获取输入框内容

js文件

微信小程序默认情况下，在电脑端预览时会有一个“调试工具”的按钮，可以用于调试和查看页面元素等。如果该按钮被隐藏或不显示，您可以尝试以下方法来让它重新显示：

1 按下键盘上的“F12”键，打开浏览器的开发者工具。在“Elements”或“Elements面板”中找到代码中的“page-meta”元素，并将其删除或注释掉。

2 在浏览器的地址栏中输入javascript:consolelog(documentquerySelector('devtools') && documentquerySelector('devtools')remove());并按下回车键，该按钮应该会重新显示。

3 如果您使用的是Chrome浏览器，可以按下快捷键“Ctrl+Shift+J”，打开浏览器的控制台，输入以下代码并按下回车键：

```javascript

documentbodyaddEventListener("keydown", function(event) {

if (eventctrlKey && eventkeyCode === 73) {

return false;

}

}, false);

```

这段代码的作用是禁用了快捷键“Ctrl+Shift+i”的功能，防止用户无意中切换到开发者工具。

需要注意的是，微信小程序是为移动设备设计的，因此在电脑端可能会有一些兼容性问题和体验上的不便。如果您需要更好的开发体验，建议您使用微信开发者工具进行开发和调试。

微信小程序6位支付密码输入框

产品需求

微信小程序支付密码6位输入框

实现效果

非明文6位输入框，模拟光标，输入自动移到下一位，满6位自动设置

实现原理

1放置一个输入框，隐藏其文字和位置，同时设置支付输入框（表格）样式

2当点击输入框时设置表格为聚焦状态，唤起键盘，点击空白处，失去焦点，设为失去焦点样式

3限制输入框最大字数为6并且监听输入框状态，以输入框值的长度作为圆点和光标展示的渲染条件

4当输入框的值等于6时，设置组件的事件传递到引用的页面，页面自定义事件（发起支付请求等）

其他说明

6位支付密码是一个很常见的需求。

在H5端用vue做过组件，app端也要求实现，小程序类似的组件在网页上检索到的并不多，仅此记录。

Github地址： >

以上就是关于微信小程序 input输入框键盘d出使得布局上移问题全部的内容，包括:微信小程序 input输入框键盘d出使得布局上移问题、微信小程序之获取input 输入框内容、微信小程序电脑端如何让隐藏按钮重新显示的软件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！