导航:首页 > 编程语言 > 展开js

展开js

发布时间:2025-06-30 04:22:00

js怎么监听移动端键盘展开事件

目的 : 监听移动端键盘展开事件

工具 : 移动端, js

思路 : 可以通过监听窗口大小的改变来实现,当端键盘展开时,窗口的大小发生改变,依据此基础进行判断.

js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局。这时候Android可以监听resize事件,代码如下,而iOS没有相关事件。

方法一实现代码:

//获取当前页面高度
varwinHeight=$(window).height();
$(window).resize(function(){
varthisHeight=$(this).height();
if(winHeight-thisHeight>50){
//窗口发生改变(大),故此时键盘弹出
//当软键盘弹出,在这里面操作
}else{
//窗口发生改变(小),故此时键盘收起
//当软键盘收起,在此处操作
}
});

方法二:监控键盘

监控的方式其实筛选下来也不过两种:

① 时钟setInterval不停监控

系统级别的监控,比如键盘出现时候通知window一个事件,但是很遗憾现在还没有这个事件,但是这个事件等于

input类元素获取焦点 == 弹出虚拟键盘

input类元素失去焦点 == 收起虚拟键盘

但是我们前面已经说过,上面的原则不一定可靠,所以该种方案也未必可靠了

基于系统监控这点,我们还可以监控resize事件或者scroll事件,但是经过我的测试,setInterval表现比较好.于是,我们简单写一段代码,可靠是否满足需求:

window.alert=function(msg){
$('body').append('<div>'+msg+'</div>')
};
functionfixedWatch(el){
if(document.activeElement.nodeName=='INPUT'){
el.css('position','static');
}else{
el.css('position','fixed');
}
}

setInterval(function(){
fixedWatch($('#headerviewheader'));
},500);

如上:移动端键盘展开事件即可被监听.

Ⅱ 这段js文本展开收缩代码默认是展开的,怎么设成默认是收缩的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1 {width: 400px; background: lightblue; margin: 0 auto;}
</style>
</head>
<body>
<div id="div1"> 说真的这届美国队甜瓜和欧文才是真大腿,每到要分、硬仗的时候没怂过,欧文的特点摆在这里,正是这种特点才让他取得现在的成就,欧文在场上现在出球速度并不慢关键是其他人真的没有什么得分、串联的能力啊,就像我在其他帖子里说的,这只球队不缺得分手,缺少的是一名轴心,组织者,要是保罗、老詹、哈登来其一都可以让进攻流畅起来,总之,这个锅不应该欧文来背。
<a href="javascript:;">>>收缩</a>
</div>
</body>
<script type="text/javascript">
var oDiv=document.getElementById('div1');
var oA=oDiv.getElementsByTagName('a');
var onOff=false;
var old='';
old=oDiv.innerHTML;
oDiv.innerHTML=oDiv.innerHTML.substring(0,20)+'......<a href="javascript:;">>>展开</a>';
oA[0].onclick=function move()
{
if(onOff)
{
onOff=false;
old=oDiv.innerHTML;
oDiv.innerHTML=oDiv.innerHTML.substring(0,20)+'......<a href="javascript:;">>>展开</a>';
oA=oDiv.getElementsByTagName('a');
oA[0].onclick=move;
}
else
{
onOff=true;
oDiv.innerHTML=old;
oA=oDiv.getElementsByTagName('a');
oA[0].onclick=move;
}
}
</script>
</html>

Ⅲ js 超出100个字隐藏展开问题

用JQUERY 比较好实现 给你需要实现该效果的DIV加上 name="content" 就行 具体代码 看附件


下载后 直接用浏览器打内开 里面的100 代表容50个汉字 你换成200 就行 然后自己加个dIV 字数少点 就可以看到效果了 下班了 没时间测 应该没问题

Ⅳ 怎么用js或jq点击展开,出现隐藏的DIV,点击收起DIV又隐藏起来.

<script src="jquery-1.8.2.js"></script>
<script>
/*展开和收起用一个div,也可以说它是个按钮,假设它的id=d1;
假设需要显示和隐藏的div叫d2;
下面这段代码只是粗略的实现了你的要求,主要是给你提供个思路;
*/
$(function(){
$('#d1').click(function(){//给d1绑定一个点击事件;

/*这个判断的意义是,如果d2是隐藏的,那么让它显示出来,并将d1的文本内容替换成收起,
如果是显示的,那么就隐藏它并将d1的文本内容替换为展开;*/
if($('#d2').is(':hidden'))
{
$('#d2').slideDown('slow');
$(this).text('收起');
}else{
$('#d2').slideUp('slow');
$(this).text('展开');
}

/*这是一个很简单的事件处理,如果还需要跟上图片的变换,就在判断的对应位置写入图片或者背景变换的代码,*/
});
});
</script>
<div id='d1'>展开</div>
<div id='d2' style=" display:none">内容</div>

阅读全文

与展开js相关的资料

热点内容
文件把格式后缀隐藏 浏览:888
qq接收到的文件册不掉怎么办 浏览:935
优胜编程培训怎么样 浏览:464
苹果zip文件怎么解压 浏览:461
怎么知道网站合不合法 浏览:442
手机双页面app怎么移动 浏览:701
电信中兴b860a破解教程 浏览:87
js函数event 浏览:844
手机发图片获取原始文件失败 浏览:538
怎么才能在平安app买商业险 浏览:179
怎么调用编程协议 浏览:401
js年份选择器 浏览:276
游戏下载什么文件最好 浏览:611
吊丝动漫app安卓版在哪里下载 浏览:194
韩剧tvapp缓存视频文件在哪里 浏览:860
台湾网络电视直播 浏览:548
ipad如何恢复旧版本 浏览:902
如何破解电脑启动密码 浏览:154
苹果动态壁纸app怎么退订 浏览:76
网站对接商户怎么弄教程 浏览:618

友情链接