uni小程序的input confirm-type功能

最新推荐文章于 2024-06-06 10:19:42 发布
最新推荐文章于 2024-06-06 10:19:42 发布
阅读量6.7k 收藏 5
点赞数 3
分类专栏： javascript 文章标签： uni-app javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JQery/article/details/109614770
版权

在小程序开发中总是会遇到各种各样的按钮,比如下面的发送按钮
在这里插入图片描述
这个在官方api中是有文档的 confirm-type的一些有效值如下
在这里插入图片描述
input组件将 confirm-type属性设为上表中的一个对应的值，在图一红色的地方就会出现对应的说明的按钮值。 比如设为done，那么红框那个按键就会变为‘完成’，其他类似。

案例:

<input class="ser-input" v-model="searchTitle" confirm-type="search" bindconfirm="searchProduct" placeholder="搜索项目" />

设置后，可以像案例中绑定点击那个按键触发的事件，可以绑定完成事件‘bindconfirm’即可

不知名码农_
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序input使用confirm-type
秋来九月八
04-03 5376
微信小程序中的组件可以使用confirm-type属性来定义用户按下键盘右下角按钮（即软键盘的确认按钮）时的行为。
uniapp中的textarea设置confirm-type=“send“
weixin_42889366的博客
05-12 1883
在app上textarea设置confirm-type="send", 弹起的软键盘在安卓环境表现为"换行"，在iOS才显示“发送”。。之后在输入框旁边写个button，利用这个进行发送消息。
uniapp textarea 输入法发送按钮长按换行并且能发送
最新发布
muitoprazer的博客
06-06 355
输入法发送按钮长按换行并且能发送
uniapp 开发输入键盘几种 confirm-type 状态
ModStartCMS的博客
12-15 806
需要注意的是，在不同平台上，这个属性的表现可能不同。例如，在安卓平台上，会将确定键显示为搜索按钮，而在 iOS 平台上，可能会显示为完成按钮。在 uniapp 中，可以使用 confirm-type 属性来控制 input 组件的确定键的样式。例如，在安卓平台上，将 confirm-type 设置为 send 可能会没有任何效果，而在 iOS 平台上，会将确定键显示为发送按钮。search：将确定键显示为搜索按钮。send：将确定键显示为发送按钮。done：将确定键显示为完成按钮。
uniapp自定义封装确认框
jijunqing321的博客
01-13 1907
uniapp 确认框
mpvue 中input框 回车 触发 confirm事件
weixin_45112513的博客
05-23 2679
mpvue 中input框 回车 触发 confirm事件 在输入框 按下回车后，保存关键字，并放入本地存储 input绑定的confirm事件 <input v-model="keyword" @confirm="saveKeyword" @input="keywordSearch" placeholder="请输入关键字" /> 在data中声明的数据 data(){ ...
uniapp input组件@confirm方法 获取值问题
weixin_48929505的博客
03-09 2308
uniapp input 方法
uniapp中input框实现键盘右下角搜索事件
前端菜菜DayDayUp的博客
09-06 2589
uniapp中input框实现键盘右下角搜索事件
在ios端input搜索，@confirm不生效的问题
soso杰
12-30 1664
在ios端input搜索，点软键盘右下角的变成搜索，同时搜索成功之后，关闭软键盘 confirm-type 在input 里面添加 confirm-type 为 search，软键盘右下角的变成搜索 <input type="text" confirm-type="search" v-model.trim="query" @confirm="confirm(null)" placeholder="请输入政策关键词"> confirm方法 在执行这个方法的时候加上下面这句话， 就是关
uniapp-input()搜索框实现回车搜索
low666的博客
05-22 2131
uniapp-input()搜索框实现回车搜索
关于input 键盘右下方confirm-type=‘search‘ 点击事件【小程序】
qq_33247427的博客
05-26 825
bindconfirm='confirmTap' 用bindconfirm 示例 <input confirm-type='search' bindconfirm='confirmTap' placeholder="输入课本名称 出版社 年级" class='bookss-input'></input> confirmTap:function(){ console.log(event.detail.value); }, ...
【uniapp】确认框（confirm）组件
jijunqing321的博客
01-18 1万+
uniapp App端 解决input@input事件动态修改值不生效的问题
Y2000104的博客
11-11 1232
【代码】uniapp App端 解决input@input事件动态修改值不生效的问题。
uniapp中的input，输入input回车事件和输入input事件
m0_61169066的博客
03-28 2万+
<input class="inputclass font28" v-model="inputvalue" @input="input" placeholder="搜索" placeholder-class="color999 " confirm-type="search" @confirm="doSearch"/> data定义 //搜索框 inputvalue:'', methods方法 //当键盘输入时，触发input事件， .
uni-app入门:常用事件绑定与数据同步
weixin_43401380的博客
11-19 9385
uniapp零基础入门:实战案例讲解常用事件绑定与数据同步
vue 从入门到入土---复习 组件高级下
每天都要努力学习哦~~
02-01 1252
目录 ref 引用 动态组件 插槽 自定义指令 Table 案例 总结 ref 引用 1. 什么是 ref 引用 ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。 每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下， 组件的 $refs 指向一个空对象。 2. 使用 ref 引用 DOM 元素 如果想要使用 ref 引用页面上的 DOM 元...
uni-app商城中的搜索功能
Tianxiaoxixi的博客
02-02 3776
uni-app商城中的搜索功能
微信小程序——input 中 confirm-type 属性的使用
qq_43201350的博客
07-18 1367
confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持 <input type="text" confirm-type="search" /> 当设置为“search” 时， 手机软键盘就会出现“搜索”2个字 ...
uniapp组件-uni-easyinput 增强型输入框
热门推荐
03-03 3万+
easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能。 效果图： 代码实现： <template> <view> <view>输入内容："{{ value }}"</view> <uni-easyinput v-model="value" focus placeholder="默认" @input="in
vue如何实现input搜索框，confirm-type
05-31
`confirm-type` 是微信小程序中的属性，用于设置弹窗的确定按钮的文本，与 Vue 中的 input 搜索框没有直接的关联。不过，如果你想在 Vue 中实现一个具有类似功能的搜索框，你可以考虑使用 ElementUI 中的 input 组件。 在 ElementUI 的 input 组件中，可以通过 `enter-button` 属性来设置输入框后面的按钮。设置了 `enter-button` 属性后，用户在输入框中输入内容后按下 Enter 键就会触发 `enter-button` 绑定的回调函数。这个回调函数可以用来执行搜索操作。 下面是一个使用 ElementUI input 组件实现搜索框的示例代码： ``` <template> <el-input v-model="searchText" :enter-button="true" @enter="search" placeholder="请输入搜索内容" > <el-button slot="append" icon="el-icon-search" @click="search" /> </el-input> </template> <script> import { ElInput, ElButton } from 'element-ui'; export default { components: { ElInput, ElButton, }, data() { return { searchText: '', }; }, methods: { search() { // 在这里实现搜索逻辑 console.log(this.searchText); }, }, }; </script> ``` 在这个示例代码中，我们在 input 组件中设置了 `enter-button` 属性，并绑定了 `search` 方法。同时，我们还在 input 组件的 slot 中添加了一个按钮，用于执行搜索操作。这个按钮的点击事件也会触发 `search` 方法，执行搜索操作。 当用户在输入框中输入内容后按下 Enter 键或者点击搜索按钮时，都会执行 `search` 方法，从而实现搜索操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值