angural input框手机键盘回车变检索

angularjs之手机输入法回车变搜索，并触发事件,兼容pc回车事件

一.效果:回车按钮变搜索之前的输入法: 之后的输入法: 二.功能实现 <input type="search" id="search_input" placeholder="请输入" ng-keypress="search($event)"/> 1.将input的type属性写成search,输入法回车按钮会变成搜索,android有效,ios没变. 2.给input绑定keypress事件,android可以实

关于点击input框唤醒键盘导致input被遮盖的问题

关于点击input框唤醒键盘导致input被遮盖的问题这个问题相信大家在实际开发过程当中都有遇见,我自己也遇见过很多次.之前在百度上看见大多数的方法利用的都是键盘唤醒了之后,页面的实际高度会发生变化.利用这个特点对页面进行一些变动,进而让页面滚动到input框露出. 但是在实际开发过程当中,我在MDN上发现了一个很好用的方法-- Element.scrollIntoView() ,这个方法就是让当前元素滚动到浏览器窗口的可视区域内部.这个应用场景非常符合我们这个目标需求. 下面来说一下这个方法

手机端上点击input框软键盘出现时把input框不被覆盖，显示在屏幕中间（转）

转载地址:https://www.cnblogs.com/xzzzys/p/7526761.html 1 用定位为题来解决var oHeight = $(document).height(); //浏览器当前的高度 $(window).resize(function(){ if($(document).height() < oHeight){ $("#footer").css("position","sta

input框输入完回车即可查询事件

简单有效的方法,随笔记录一下在html设置id <input id="search_sim" type="text" class="form-control w-xxl" ng-model="queryObj.search" > 然后再js中设置相应的绑定事件 $('#search_sim').bind('keypress',function(event){//监听sim卡回车事件 if(event.keyCode

登录界面，body上有背景图，点击输入框时，弹出的手机键盘会把背景图顶变形，而且会把footer顶上去

js: //防止背景图被手机键盘压缩变形 $(document).ready(function () { $('body').css({'height':$(window).height()}) }); //当点击input出现手机键盘时,窗口大小改变,隐藏footer以防止footer被手机键盘顶上来 $(function(){ var oHeight = $(window).height(); //浏览器当前的高度 $(window).resize(function(){ //当浏览器窗口的

input固定定位后，当input框获取到焦点时，会离开手机软键盘的解决方法

前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了很多方法尝试,最后是用css解决的. 就是给input框所在div的以外代码块一个position: fixed; top: 0px; bottom: -20px; overflow:scroll; width: 100% 例如你的代码结构是这样的: <style> .footer{positio

input弹出的手机键盘搜索事件

一.input的搜索框在input标签里面把type设置为search就可以了.弹出的手机键盘回车键也会变成搜索或者是搜索的图标. <input id="search" type="search" ></input> 1 设置type为search的搜索框,当输入内容的时候,后面会多出一个x,点击x可以清空输入的内容. 二.获取键盘搜索事件输入内容之后直接点击手机键盘的搜索按钮就可以进行搜索了.以下是获取键盘搜索事件: //

js－移动端android浏览器中input框被软键盘遮住的问题解决方案

我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <section class="sureTweetApply" style="display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;"> <!--<div class=&

vue 监听手机键盘是否弹出及input是否聚焦成功

//定义移动端类型 function pageStats() { let u = navigator.userAgent, app = navigator.appVersion; let obj = {}; obj.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 obj.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

当滚动列表的时候，让input框失去焦点（移动端会收起键盘）

1.拓展scroll.vue事件 beforeScroll:{ type:Boolean, default:false } if(this.beforeScroll){//滚动列表的时候收起键盘(移动端) this.scroll.on('beforeScrollStart',()=>{ this.$emit('beforeScroll') }) } 2.在suggest.vue里声明beforeScrll:true,并$emit(beforeScroll)事件 beforeScroll(){ t

关于键盘事件-查询：有多个input框，任意一个支持enter键查询

应用场景:同一个界面有多个input框支持任意一个Enter查询. 实现:在input框中添加onkeypress="函数名()". 函数里面编写对应键盘code值,在里面直接调用查询方法即可 eg:function xx(){ if(判断键盘code值){ 执行查询方法 } }

双击内容变input框可编辑，失去焦点后修改的数据异步提交

<html> <head> <meta charset="utf8"> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ // alert(0); $(

JS移动端如何监听软键盘回车事件

移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签注意点:form标签一定得添加 action属性(可设置为空) <form action=""><input type="text" name="search" /></form> 移动端软键盘的回车会触发form的submit事

react在安卓下输入框被手机键盘遮挡问题

问题概述今天遇到了一个问题,在安卓手机上,当我要点击输入"店铺名称"时,手机软键盘弹出来刚好把输入框挡住了:挡住就算了,关键是页面还不能向上滑动,整个手机窗口被压为原来的二分之一左右: 然后然后找了一些方案,不过不大适用,或者是有点麻烦:所以需要整合一下, 首先,我想一下我要实现的效果想要实现的效果如图,当手机键盘出现时,页面是可以自由滚动的,而且当前聚焦的输入框往红线处靠齐,这样就刚好在剩下的窗口的垂直正中间,这样就不会出现输入框被挡住,看

bootstrap制作搜索框及添加回车搜索事件

下面是开发中用bootstrap制作的一个搜索框,以及给搜索框添加回车搜索事件的一个小案例. bootstrap制作搜索框及添加回车搜索事件下面是功能实现的代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap制作搜索框及添加回车搜索事件</title> <link rel="stylesheet"

九度OJ 1079 手机键盘

题目地址:http://ac.jobdu.com/problem.php?pid=1079 题目描述: 按照手机键盘输入字母的方式,计算所花费的时间如:a,b,c都在“1”键上,输入a只需要按一次,输入c需要连续按三次. 如果连续两个字符不在同一个按键上,则可直接按,如:ad需要按两下,kz需要按6下如果连续两字符在同一个按键上,则两个按键之间需要等一段时间,如ac,在按了a之后,需要等一会儿才能按c. 现在假设每按一次需要花费一个时间段,等待时间需要花费两个时间段. 现在给出一串字符,需要

小实例---关于input宽度自适应以及多个input框合并拆分

前两个月,公司内部需要开发关于大数据方面的辅助工具语料分词系统,在这个项目中遇到以下几个主要问题,在此分享~ 一.input宽度根据内定文本宽度自适应背景:项目需求中,前台展示,需要从后台获取的.txt文件解析成很多字符串,然后分别放在前台input框中,贴图: 其中,每一个字符串,长度不一,所以,input框要根据字符串的长度,发生变化,这里就要解决input自适应的问题了. 方法一:网上搜索的,误差很大,仅供参考~ 然后,我又改善了一下,减小误差. //字符串文本 var a1 = "人民

小程序中点击input控件键盘弹出时placeholder文字上移

最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的"当获取焦点时,将fixed的元素改为static;失去焦点,再改回fixed"的方法,然而行不通,我试着给input加了个边框,然而当软键盘弹出时input框并没有移动,仅仅是input中的placeholder上移了,因此只能想到了让placeholder文字在聚焦是为空,在失焦是显示为指定值一下

清华机试中手机键盘问题求解 java 和 c

题目描述:按照手机键盘输入字母的方式,计算所花费的时间如:a,b,c都在“1”键上,输入a只需要按一次,输入c需要连续按三次.如果连续两个字符不在同一个按键上,则可直接按,如:ad需要按两下,kz需要按6下如果连续两字符在同一个按键上,则两个按键之间需要等一段时间,如ac,在按了a之后,需要等一会儿才能按c. 现在假设每按一次需要花费一个时间段,等待时间需要花费两个时间段. 现在给出一串字符,需要计算出它所需要花费的时间. 输入描述:一个长度不大于100的字符串,其中只有手机按键上有的小写字

主动触发input框的失去焦点事件，阻止输入法跳出

今天遇到个问题,我在手机做一个选择生日的功能,但是当我点击input框时,事件选择插件和输入法都弹出来了,很丑,然后就想阻止输入法弹出来, 网上一个方法是:在input框的获取焦点事件里,主动触发失去焦点事件,这样就阻止输入法的弹出了,很好,上个代码: <input type="text" class="nameInput birthDayInput" placeholder="点击选择生日日期" @focus="openPick

巴特西