小程序输入框文字弹出 文字上移问题

输入框文字上移问题

wxlm

<input autoFocus="true" bindconfirm="confirmSearch" bindinput="search" class="srch-ipt" confirmType="search" placeholder="搜索内容" placeholderClass="ipt-placeholder" type="text" value=""></input>

wxss

.srch-ipt {
  /* prettier-ignore */
  height: 32PX;
  text-align: left;
  /* prettier-ignore */
  font-size: 15PX;
}

.ipt-placeholder {
  /* prettier-ignore */
  font-size: 15PX;
  color: #bebebe;
  text-align: left;
}

.lxy-nav-bar-search__input {
  flex: 1;
}

上方代码可以完美解决ios文字上移问题,对于Android会降低偏移大小,因为此问题是微信原生组件所带来的,所以此套方案较为合适

Android机子文字弹出输入框

  • 在 Android 机子会出现文字被键盘弹起顶出 input 框,解决方案为页面设置一个死的高度不要高于 windowHeight,最好是设置一个固定高度或者动态计算高度赋值

小程序自定义导航栏(完美适配所有手机)

实现这个功能可以采用以下步骤: 1. 在页面中添加一个图片组件,并为其绑定点击事件。 2. 点击事件触发后,弹出一个输入框组件,让用户输入文字批注。 3. 用户输入完成后,将输入的内容保存到一个数组中,并在图片上添加一个标记,标记可以是一个图标或者一个文字标签。 4. 再次点击标记时,弹出一个编辑框组件,让用户对输入的文字进行编辑。 5. 用户编辑完成后,更新保存在数组中的文本内容,并更新标记展示的内容。 具体实现可以参考以下代码: ```html <template> <view> <image src="图片地址" @click="showInput"></image> <view v-for="(note, index) in notes" :key="index"> <text class="note" :style="{left: note.left + 'px', top: note.top + 'px'}" @click="editNote(index)">{{ note.text }}</text> </view> <input v-show="show" v-model="inputValue" @confirm="addNote" placeholder="请输入文字批注"></input> <input v-show="showEdit" v-model="editValue" @confirm="updateNote" placeholder="请输入编辑后的内容"></input> </view> </template> <script> export default { data() { return { show: false, // 是否显示输入框 showEdit: false, // 是否显示编辑框 notes: [], // 存储批注信息的数组 inputValue: '', // 输入框中的值 editValue: '', // 编辑框中的值 editIndex: -1 // 当前编辑的批注在数组中的下标 } }, methods: { // 点击图片,打开输入框 showInput() { this.show = true }, // 点击输入框确定按钮,添加批注 addNote() { const left = 100 // 标记左上角距离图片左上角的横坐标 const top = 100 // 标记左上角距离图片左上角的纵坐标 const note = { text: this.inputValue, left, top } this.notes.push(note) this.show = false this.inputValue = '' }, // 点击批注,打开编辑框 editNote(index) { this.editIndex = index this.editValue = this.notes[index].text this.showEdit = true }, // 点击编辑框确定按钮,更新批注 updateNote() { this.notes[this.editIndex].text = this.editValue this.showEdit = false this.editValue = '' this.editIndex = -1 } } } </script> <style> .note { position: absolute; } </style> ``` 需要注意的是,标记的位置需要根据用户点击的位置进行计算,可以使用 `event.touches[0].pageX` 和 `event.touches[0].pageY` 获取用户点击的坐标,然后计算标记的位置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值