首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

javascript 想屏蔽键盘方向键控制div1(外层)的滚动条,却导致了div2(里层)里的文本框不能输入文字了,如何解决

2013-06-19 
javascript 想屏蔽键盘方向键控制div1(外层)的滚动条,却导致了div2(里层)里的文本框不能输入文字了,怎么解

javascript 想屏蔽键盘方向键控制div1(外层)的滚动条,却导致了div2(里层)里的文本框不能输入文字了,怎么解决
<html>
<head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
var x1=0;
var x2=0;
$(document).ready(function(){
  $("input").focus();
  $("#div1").bind("keydown",function() {
        return false;//想屏蔽键盘方向键控制div1的滚动条,却导致了div2里的文本框不能输入文字了,怎么解决
        //return true; //文本框可以输入文字了
  });
  $("#div2").bind("keydown",function() {
    $("#span1").text(x1+=1);
  });
  $("input").bind("keydown",function() {
    $("#span2").text(x2+=1);
  });
});
</script>
</head>
<body>
    <div id="div1" style="width:200px;height:100px;overflow:scroll;border:1px solid green" onkeydown="return false;">
    <div id="div2" style="width:999px;border:1px solid red" >
        <input value="aaabbbccc"><BR>
        text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. </div>
        <br /><br />
        text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</div>
    <p>div1里的div2 键盘按了 <span id="span1">0</span> 次。</p>
    <p>div1里的div2里的textbox 键盘按了 <span id="span2">0</span> 次。</p>
</body>
</html>
JavaScript 事件 冒泡? 屏蔽 JQuery
[解决办法]
  $("input").bind("keydown",function(event) {
    $("#span2").text(x2+=1);
event.stopPropagation();
  });

[解决办法]
jquery 的我不会, 下面是标准的javascritp 的实现思路。在IE, chrome上测试通过,firfox 没试过
table.onselectstart = function(e) {
var ent = e
[解决办法]
event;
return ent.srcElement.tagName=='INPUT';
}
[解决办法]


onKeyDown下件下,也可以用下面的语句来控制,方向键的有无效果。
ent.returnValue = false;
[解决办法]
<html>
<head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
var x1=0;
var x2=0;
$(document).ready(function(){
  $("input").focus();
  $("#div1").bind("keydown",function() {
        return false;//想屏蔽键盘方向键控制div1的滚动条,却导致了div2里的文本框不能输入文字了,怎么解决
        //return true; //文本框可以输入文字了
  });
  $("#div2").bind("keydown",function() {
    $("#span1").text(x1+=1);
  });
  $("table").find("td").bind("keydown",function(event) {
    $("#span2").text(x2+=1);
  });
  $("table input").bind("keydown",function(event) {
    event.stopPropagation();
  });
});
</script>
</head>
<body>
    <div id="div1" style="width:200px;height:100px;overflow:scroll;border:1px solid green" onkeydown="return false;">
    <div id="div2" style="width:999px;border:1px solid red" >
        <table border="1" cellspacing="0" cellpadding="0">
            <tr><td><input value="aaabbbccc"></td></tr>
            <tr><td>text........</td></tr>
        </table>
    </div>
    </div>
    <p>div1里的div2 键盘按了 <span id="span1">0</span> 次。</p>
    <p>div1里的 div2里的td 键盘按了 <span id="span2">0</span> 次。</p>
</body>
</html>

热点排行