微信input type=“nickname“无法获取点击的名称

如果直接使用v-model绑定 是无法拿到小程序名称输入框中的值的
废话不多说 直接上代码

<input type="nickname" id="nickname-input"  @blur="myblur"
            v-model="info.username"  />

myblur(e) {
        let _this = this
        uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)  
          .select("#nickname-input")
          .fields({
            properties: ["value"],
          })
          .exec((res) => {
            console.log('昵称 createSelectorQuery', res[0].value)
                   })
      },

直接在失去焦点的时候 根据id获取标签然后拿值
通过测试 直接赋值的话 在模拟器中是不会生效的 但是在真机模拟和发布测试版本在手机上运行都是可行的 所以可以使用

### 关于微信小程序 Input 输入框的常见问题及其解决方案 #### 华为手机输入法弹起导致页面上移的问题 当在华为设备上使用微信小程序时,如果调起输入法,可能会出现页面被挤压的情况,尤其是 `input` 输入框的位置会发生异常偏移。这种现象通常是因为默认情况下,微信小程序会自动调整页面位置以适应键盘的高度变化。 为了防止这种情况发生,可以通过设置属性 **`adjust-position="{{false}}"`** 来禁用页面的自动调整功能[^1]。以下是具体的代码示例: ```html <input type='text' bindinput='onInputInfo' adjust-position="{{false}}" bindblur="onInputInfo1" value='{{nickname}}' placeholder='请输入您的昵称' placeholder-class="input-placeholder" maxlength='20' /> ``` 上述代码中的 `adjust-position="{{false}}"` 属性能够有效阻止页面因输入法弹出而产生的不必要位移。 --- #### 多个 Input 输入框的数据绑定与动态更新 对于需要处理多个 `input` 输入框并实现双向数据绑定的需求,可以采用统一的事件监听器来管理各个输入框的状态。具体做法如下: 1. 在每个 `input` 标签中绑定对应的初始值 `value="{{字段名}}"`; 2. 使用自定义属性(如 `data-params`)标记每个输入框所对应的具体字段名称; 3. 在 `bindinput` 方法中提取当前触发事件的目标对象以及其关联的字段名称和新值。 下面是完整的实现方式: ```html <view> <input type='text' name='username' data-param='username' value='{{formData.username}}' bindinput='handleInputChange' placeholder='请输入用户名'/> <input type='number' name='age' data-param='age' value='{{formData.age}}' bindinput='handleInputChange' placeholder='请输入年龄'/> </view> ``` ```javascript Page({ data: { formData: { username: '', age: '' } }, handleInputChange(e) { const { param } = e.currentTarget.dataset; const value = e.detail.value; this.setData({ [`formData.${param}`]: value }); } }); ``` 此方案利用了 JavaScript 的模板字符串语法 `${}` 动态修改指定路径下的数据项,从而实现了多输入框状态同步的功能[^2]。 --- #### 总结 针对微信小程序开发过程中常见的 `input` 输入框相关问题,提供了两种有效的应对策略:一是通过配置 `adjust-position` 参数解决特定机型上的界面错乱;二是借助灵活的数据绑定机制简化复杂场景下用户交互逻辑的设计与维护工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值