导航:首页 > 编程语言 > 展开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相关的资料

热点内容
js给php变量赋值 浏览:446
杂志版本号是什么意思 浏览:223
地图特效代码 浏览:192
去除思科配置文件中的号 浏览:196
运行的16位程序太多 浏览:1
苹果mac用什么软件好学编程 浏览:681
ai中线段怎么添加宽度配置文件 浏览:956
lol文件怎么找不到game 浏览:142
aecc视频教程 浏览:983
linux怎么查看数据库用户名 浏览:182
cefs文件系统 浏览:404
学平面设计个编程哪个好 浏览:701
如何把编程文件转为hex 浏览:80
清除苹果地图来自地址 浏览:233
已经打开的文件如何清理 浏览:685
视频网站有什么用 浏览:70
多个表格文件怎样压缩文件 浏览:729
cad文件大很卡如何解决 浏览:633
将java程序打包成apk 浏览:277
2021唱吧文件找不到了 浏览:463

友情链接