切换导航
网站首页
编程语言
前端开发
移动开发
开发工具
程序设计
CMS系统
服务器
数据库
面试题
菜鸟教程
分类导航
HTML
HTML5
JavaScript
CSS
jQuery
Bootstrap
Angularjs
Vue
Dojo
Json
Electron
Node.js
Express
XML
Ajax
Unity
React
Flex
Web前端
微信小程序
支付小程序
百度小程序
大佬教程
前端开发
JavaScript
mint-ui的search组件在键盘显示搜索按钮的实现方法
上一篇: ES6中Class类的静态方法实例小结
下一篇:JS获取数组中出现次数最多及第二...
mint-ui的search组件在键盘显示搜索按钮的实现方法
JavaScript
发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com
大佬教程
收集整理的这篇文章主要介绍了
mint-ui的search组件在键盘显示搜索按钮的实现方法
，
大佬教程
大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
代码如下所示：
value)">
E)">
fals
E)
" type="snake" :size="10">
</form></pre> </div> <p><h3>解决办法：</h3></p> @H_70_0<a href="http://code.js-code.com/tag/m/" target="_blank" class="keywords">@m</a>int-ui的search组件input默认也是type="search"类型的，但是还需要在外层包一组form标签，并且带有action,就会在键盘中出现搜索按钮。</p> <p><h3>如上是方法一：</h3></p> <p>在手机键盘点击搜索的时候，页面会刷新，所以给form加一个target，target规定在何处打开 action URL，再放入一个隐藏的iframe,起名为form的target的值，这样则在当前页面展示出搜索的内容</p> <p><h3>如下是方法二：</h3></p> <div class="jb51code"> <pre class="brush:js;"> <form action="" onsubmit="return <a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se;"> <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(<a href="http://code.js-code.com/tag/value/" target="_blank" class="keywords">value)</a>"> <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <ListItem :lists="lists"></ListItem> <div class="loading-text" v-if="(loadingTextBtn==tru<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a>"><span v-text="loadingText"></span><mt-spinner v-if="(loadingComplete==<a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>s<a href="http://code.js-code.com/tag/E/" target="_blank" class="keywords">E)</a>" type="snake" :size="10"></mt-spinner></div> </div> </mt-search> </form></pre> </div> <p>这里直接给onsubmit事件写入return <a href="http://code.js-code.com/tag/fal/" target="_blank" class="keywords">fal</a>se，禁止提交，则搜索列表页也可以在当前页面展示。</p> <p><h3>总结</h3></p> <p>以上所述是小编给大家介绍的mint-ui的search组件在键盘显示搜索按钮的实现方法。菜鸟教程 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得菜鸟教程不错，可分享给好友！感谢支持。</p> <h2>大佬总结</h2> <p>以上是<a href="http://code.js-code.com" title="http://code.js-code.com">大佬教程</a>为你收集整理的<a href="http://code.js-code.com/javascript/274172.html" class="article_link" target="_blank">mint-ui的search组件在键盘显示搜索按钮的实现方法</a>全部内容，希望文章能够帮你解决<a href="http://code.js-code.com/javascript/274172.html" class="article_link" target="_blank">mint-ui的search组件在键盘显示搜索按钮的实现方法</a>所遇到的程序开发问题。</p> <p>如果觉得<a href="http://code.js-code.com" title="http://code.js-code.com">大佬教程</a>网站内容还不错，欢迎将<a href="http://code.js-code.com" title="http://code.js-code.com">大佬教程</a>推荐给程序员好友。</p> <blockquote>本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。<br>如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。</blockquote> </div> <div class="tags text-center clearfix center-block">标签：<a href="http://code.js-code.com/tag/mint/" class="tag_link" target="_blank">mint</a><a href="http://code.js-code.com/tag/ui/" class="tag_link" target="_blank">ui</a></div> </div> <div class="panel panel-default"> <ul class="list-group"> <li class="list-group-item"><a href="http://code.js-code.com/javascript/274171.html" class="prev" target="_self"> 上一篇: ES6中Class类的静态方法实例小结</a><a href="http://code.js-code.com/javascript/274173.html" class="text-muted pull-right" target="_self"> 下一篇:JS获取数组中出现次数最多及第二...</a></li> </ul> </div> <div class="panel panel-default"> </div> <div class="panel panel-default"> <div class="panel-heading font-weight-bold">猜你在找的JavaScript相关文章</div> <ul class="list-group"><li class="list-group-item"> <a href="http://code.js-code.com/javascript/284450.html" title="JavaScript实现页面5秒后自动跳转的方法">JavaScript实现页面5秒后自动跳转的方法</a> <span class="text-muted pull-right">2022-04-16</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/271645.html" title="JS获取前天、昨天、今天、明天、后天的时间">JS获取前天、昨天、今天、明天、后天的时间</a> <span class="text-muted pull-right">2022-04-16</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/282665.html" title="推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)">推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)</a> <span class="text-muted pull-right">2022-04-16</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/1204.html" title="JavaScript单位换算和数字格式化">JavaScript单位换算和数字格式化</a> <span class="text-muted pull-right">2019-10-09</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/1203.html" title="JavaScript 运行时错误: 无法获取未定义或 null 引用的属性，怎么办？">JavaScript 运行时错误: 无法获取未定义或 null 引用的属性，怎么办？</a> <span class="text-muted pull-right">2019-10-09</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286611.html" title="如何使用Javascript获取元素的不透明度？">如何使用Javascript获取元素的不透明度？</a> <span class="text-muted pull-right">2022-04-16</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/1201.html" title="JAVASCRIPT中URL 传递参数(特殊字符)解决方法及转码解码的介绍">JAVASCRIPT中URL 传递参数(特殊字符)解决方法及转码解码的介绍</a> <span class="text-muted pull-right">2019-10-09</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/1200.html" title="JavaScript中_proto_和prototype的区别">JavaScript中_proto_和prototype的区别</a> <span class="text-muted pull-right">2019-10-09</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/1199.html" title="【Javascript】【DOM操作】获取checkbox的checked属性">【Javascript】【DOM操作】获取checkbox的checked属性</a> <span class="text-muted pull-right">2019-10-09</span> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/1197.html" title="如何理解JavaScript权威指南第96页的“也就是说，可以在声明一个JavaScipt函数之前调用它”">如何理解JavaScript权威指南第96页的“也就是说，可以在声明一个JavaScipt函数之前调用...</a> <span class="text-muted pull-right">2019-10-09</span> </li></ul> </div> <div class="panel panel-default"> <div class="panel-heading"><a href="https://www.js-code.com/all" class="font-weight-bold">其他相关热搜词</a><span class="pull-right"><a href="https://www.js-code.com/all">更多</a></span></div> <div class="panel-body list-cloud"><a href="http://code.js-code.com/tag/php/">php</a><a href="http://code.js-code.com/tag/Java/">Java</a><a href="http://code.js-code.com/tag/Python/">Python</a><a href="http://code.js-code.com/tag/chengxuyuan/">程序员</a><a href="http://code.js-code.com/tag/load/">load</a><a href="http://code.js-code.com/tag/zhong/">中</a><a href="http://code.js-code.com/tag/ruhe/">如何</a><a href="http://code.js-code.com/tag/string/">string</a><a href="http://code.js-code.com/tag/shiyong/">使用</a><a href="http://code.js-code.com/tag/canshu/">参数</a><a href="http://code.js-code.com/tag/jquery/">jquery</a><a href="http://code.js-code.com/tag/kaifa/">开发</a><a href="http://code.js-code.com/tag/anzhuang/">安装</a><a href="http://code.js-code.com/tag/list/">list</a><a href="http://code.js-code.com/tag/linux/">linux</a><a href="http://code.js-code.com/tag/ios/">ios</a><a href="http://code.js-code.com/tag/android/">android</a><a href="http://code.js-code.com/tag/gongju/">工具</a><a href="http://code.js-code.com/tag/javascript/">javascript</a><a href="http://code.js-code.com/tag/cap/">cap</a></div> </div> </div> <div class="col-sm-3"> <div style="position:fixed!important;top:334px;height:550px;z-index:9999;"> <div class="_wfhdnfcjs9"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6828100", container: "_wfhdnfcjs9", async: true }); </script> <!-- 多条广告如下脚本只需引入一次 --> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script> </div> <div class="panel panel-default" style="display: none;"> <div class="panel-heading font-weight-bold">最新JavaScript教程</div> <ul class="list-group"><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286611.html" title="如何使用Javascript获取元素的不透明度？">如何使用Javascript获取元素的不透明度？</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286610.html" title="javascript – 如何扩展谷歌分析以跟踪AJAX等(根据H5BP文档)">javascript – 如何扩展谷歌分析以跟踪AJAX等(根据H5BP文档)</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286609.html" title="javascript – Webpack加载字体">javascript – Webpack加载字体</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286608.html" title="javascript – Angular2’this’未定义">javascript – Angular2’this’未定义</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286607.html" title="javascript – JQuery UI自动完成回调">javascript – JQuery UI自动完成回调</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286606.html" title="在javascript中使用和捕获RangeError">在javascript中使用和捕获RangeError</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286605.html" title="在javascript中将军事时间转换为标准时间的最佳方法">在javascript中将军事时间转换为标准时间的最佳方法</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286604.html" title="javascript – 从getElementsByTagName()获取属性的最佳方法？">javascript – 从getElementsByTagName()获取属性的最佳方法？</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286603.html" title="javascript – 如何在HTA的默认Web浏览器中打开链接？">javascript – 如何在HTA的默认Web浏览器中打开链接？</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286602.html" title="javascript – WebGL iOS渲染到浮点纹理">javascript – WebGL iOS渲染到浮点纹理</a> </li></ul> </div> <div class="panel panel-default" style="display: none;"> <div class="panel-heading font-weight-bold">热门JavaScript教程</div> <ul class="list-group"><li class="list-group-item"> <a href="http://code.js-code.com/javascript/1208.html" title="Javascript, jQuery 各种height整理">Javascript, jQuery 各种height整理</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/1198.html" title="JavaScript: 奇数在左，偶数在右">JavaScript: 奇数在左，偶数在右</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/1205.html" title="JavaScript中的位运算">JavaScript中的位运算</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/1203.html" title="JavaScript 运行时错误: 无法获取未定义或 null 引用的属性，怎么办？">JavaScript 运行时错误: 无法获取未定义或 null 引用的属性，怎么办？</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/1196.html" title="javascript note">javascript note</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286611.html" title="如何使用Javascript获取元素的不透明度？">如何使用Javascript获取元素的不透明度？</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286610.html" title="javascript – 如何扩展谷歌分析以跟踪AJAX等(根据H5BP文档)">javascript – 如何扩展谷歌分析以跟踪AJAX等(根据H5BP文档)</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286609.html" title="javascript – Webpack加载字体">javascript – Webpack加载字体</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286608.html" title="javascript – Angular2’this’未定义">javascript – Angular2’this’未定义</a> </li><li class="list-group-item"> <a href="http://code.js-code.com/javascript/286607.html" title="javascript – JQuery UI自动完成回调">javascript – JQuery UI自动完成回调</a> </li></ul> </div> </div> </div> </div> <footer id="footer"> <div class="container"> <div class="row hidden-xs"> <dl class="col-sm-4 site-link"> <dt>最近更新</dt><dd> <a href="http://code.js-code.com/webqianduan/919677.html" title="面向前端开发人员的 20 个强大的 VS Code 扩展">面向前端开发人员的 20 个强大的...</a> <span class="text-muted pull-right">2024-04-28 </span> </dd><dd> <a href="http://code.js-code.com/webqianduan/919676.html" title="面向前端开发人员的 20 个强大的 VS Code 扩展">面向前端开发人员的 20 个强大的...</a> <span class="text-muted pull-right">2024-04-28 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919675.html" title="Linux——（1）基本命令">Linux——（1）基本命令</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919674.html" title="【UNIAPP】上传视频，进度条的前台与后端">【UNIAPP】上传视频，进度条的前...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919673.html" title="You can't specify target table 'xxx' for update in FROM clause的解决">You can't specify target t...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919672.html" title="jmeter压测，将jmeter返回数据，保存到表格">jmeter压测，将jmeter返回数据，...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919671.html" title="经典区间dp 【方块消除】">经典区间dp 【方块消除】</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919670.html" title="java-day02">java-day02</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919669.html" title="【异常】 'ascii' codec can't decode byte 0xe8 in position 2: ordinal not in range(128)">【异常】 'ascii' cod...</a> <span class="text-muted pull-right">2022-07-21 </span> </dd><dd> <a href="http://code.js-code.com/chengxubiji/919668.html" title="Django后台admin常用设置">Django后台admin常用设置</a> <span class="text-muted pull-right">2022-07-21 </span> </dd></dl> <dl class="col-sm-4 site-link"> <dt>热门文章</dt><dd> <a href="http://code.js-code.com/php/8105.html" title="php实现mysql数据库分表分段备份">php实现mysql数据库分表分段备份</a> <span class="text-muted pull-right">2019-11-12 </span> </dd><dd> <a href="http://code.js-code.com/php/9790.html" title="php基于base64解码图片与加密图片还原实例">php基于base64解码图片与加密图片...</a> <span class="text-muted pull-right">2019-11-13 </span> </dd><dd> <a href="http://code.js-code.com/php/6138.html" title="自定义min版smarty模板引擎MinSmarty.class.php文件及用法">自定义min版smarty模板引擎MinSm...</a> <span class="text-muted pull-right">2019-11-12 </span> </dd><dd> <a href="http://code.js-code.com/php/6073.html" title="php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例">php自定义中文字符串截取函数sub...</a> <span class="text-muted pull-right">2019-11-12 </span> </dd><dd> <a href="http://code.js-code.com/php/4608.html" title="PHP使用preg_split()分割特殊字符(元字符等)的方法分析">PHP使用preg_split()分割特殊字符...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4416.html" title="PHP利用正则表达式将相对路径转成绝对路径的方法示例">PHP利用正则表达式将相对路径转成...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4124.html" title="PHP删除二维数组中相同元素及数组重复值的方法示例">PHP删除二维数组中相同元素及数组...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4079.html" title="php对xml文件的增删改查操作实现方法分析">php对xml文件的增删改查操作实现...</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/4028.html" title="PHP判断密码强度的方法详解">PHP判断密码强度的方法详解</a> <span class="text-muted pull-right">2019-11-11 </span> </dd><dd> <a href="http://code.js-code.com/php/3899.html" title="PHP简单计算两个时间差的方法示例">PHP简单计算两个时间差的方法示例</a> <span class="text-muted pull-right">2019-11-11 </span> </dd></dl> <dl class="col-sm-2 site-link"> <dt>好站推荐</dt> <dd><a target="_blank" href="http://www.js-code.com">脚本宝典</a></dd> </dl> </div> <div class="copyright"> Copyright © 2019 大佬教程<br> <a href="http://www.miibeian.gov.cn/" rel="nofollow"></a> <span class="ml5">大佬教程 版权所有 <a href="https://www.miitbeian.gov.cn" target="_blank">豫ICP备15014364号-1</a></span> </div> </div> </footer> <script> (function(){ var src = "https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7e7b41e04f68f42525f709a1dfb50437"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1281094757'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D1281094757%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script> <script src="http://code.js-code.com/template/www/desktop/static/r_js/readmore.js" type="text/javascript"></script> <script> const btw = new BTWPlugin(); btw.init({ id: 'codeContent', blogId: '29457-1651677100115-362', name: 'DearMrGao', qrcode: 'http://code.js-code.com/res/2022/05-04/23/ea106a76a9b6f2bfc9374cb2e57301e4.jpg', keyword: '暗号', }); </script> <script type="text/javascript"> let ad = sessionStorage.getItem('codejdad') if(ad=='y'){ $("#jdad").hide(); }else{ $("#jdad").show(); } $("#jdad").click(function(){ { sessionStorage.setItem('codejdad','y') $("#jdad").hide(); window.open('https://u.jd.com/cM7PKuj'); } }) </script> </body> </html>
