IE9 和 10 不反映 JavaScript 光标更改
IE9 and 10 doesn't reflect javascript cursor change
下面的代码示例在单击按钮时添加半透明的 100% 覆盖。叠加层将一直保留,直到释放鼠标按钮。这是应该发生的事情:
-
单击按钮并按住鼠标。
-
当鼠标向下时,按下并释放 shift 键。
-
按下时,div 区域用文本"水平"表示这一点,光标更改为电子调整大小。当 shift 被释放时,div 指示"垂直"和光标将更改为 N 调整大小。
在IE9/10中,文本会更改,但光标保持不变。我尝试将密钥绑定更改为正文级别和覆盖级别,但无济于事。
这是代码:(我尝试将其放入jsfiddle和jsbin中,但由于某种原因,它们完全忽略了按键)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.overlay {
background-color: rgba(0, 0, 0, 0.3);
top: 0; bottom: 0; left: 0; right: 0; position: fixed;
z-index: 999;
}
.vertical { cursor: n-resize !important; }
.horizontal { cursor: e-resize !important; }
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#button1").mousedown(onButtonMouseDown);
function onButtonMouseDown(e) {
var overlay;
overlay = $("body").after("<div class='"overlay'"></div>").next();
overlay.addClass((e.shiftKey) ? "horizontal" : "vertical");
$(document).bind("keydown.ntextbox", function (e) {
if (e.which === 16) {
overlay.removeClass("vertical").addClass("horizontal");
$("#div1").html("horizontal");
}
});
$(document).bind("keyup.ntextbox", function (e) {
if (e.which === 16) {
overlay.removeClass("horizontal").addClass("vertical");
$("#div1").html("vertical");
}
});
overlay.mouseup(function (e) {
overlay.remove();
$(document).unbind(".ntextbox");
return false;
});
return false;
}
});
</script>
</head>
<body>
<div id="div1">...</div>
<button id="button1">Click me</button>
</body>
</html>
相当奇怪的问题,但我瞄准了主要问题。与其复制逻辑,在设置了适当的样式后再次添加光标,不如将按钮替换为其自身的克隆。让我解释一下。
当您mousedown
按钮时,这将控制光标,不再允许您在IE中修改它。经过大约一个小时的尝试,我终于意识到,如果你在按钮事件上调用$(this).remove()
,UI将不再被阻止,你可以根据需要自由更新光标。然而,这确实让我们没有按钮。
最后,如果修改了按钮逻辑以将自身替换为克隆。这有效地消除了阻止光标更改的按钮,尽管最终用户知道没有发生此类切换。
此外,我更新了您的一些代码,因为它有一些非常严重的问题(例如在 body 标签之外添加覆盖元素等等)。
以下内容可以稍微清理一下:
var overlay = $("<div>", {
'class':'overlay',
'mouseup':function(){ $(this).hide() }
}).hide().appendTo("body");;
$("#button1").on("mousedown", function(){
overlay.show();
// Replacing this button permits the cursor
// to be updated in IE
$(this).replaceWith( $(this).clone(true) );
});
$(document).on('keydown keyup', function(e){
if ( e.which === 16 && overlay.is(":visible") ) {
if ( e.type === "keyup" ) {
overlay.addClass("vertical").removeClass("horizontal");
} else {
overlay.addClass("horizontal").removeClass("vertical");
}
}
});
小提琴:http://jsfiddle.net/jonathansampson/p6eZw/
值得注意的是,根据我的测试,Chrome仍然阻止用户更改光标的能力。我没有看过Firefox,Safari或Opera。
添加以下jQuery语句似乎可以解决这个问题。
$(".overlay").css("cursor", "e-resize");
$(".overlay").css("cursor", "n-resize");
所以,也许是这样的事情?
$(document).bind("keydown.ntextbox", function (e) {
if (e.which === 16) {
overlay.removeClass("vertical").addClass("horizontal").css("cursor", "e-resize");
$("#div1").html("horizontal");
}
});
$(document).bind("keyup.ntextbox", function (e) {
if (e.which === 16) {
overlay.removeClass("horizontal").addClass("vertical").css("cursor", "n-resize");
$("#div1").html("vertical");
}
});
- 在Widget代码中使用javascript从左向右滑动光标图像
- 使用JavaScript的带有背景图像的径向光标
- 无法在Chrome控制台中使用javascript将焦点和光标设置为输入文本
- jQuery/Javascript>on单击将文本放置在最后一个已知的光标位置
- Javascript/jQuery在可编辑的DIV中设置光标
- 我可以通过javascript在鼠标光标旁边动态添加文本吗?
- Javascript用光标擦除图像
- 将光标放在 javascript 文本框的末尾
- 鼠标光标改变Javascript链接的DIV
- Javascript键下空格键+光标键
- 当光标离开屏幕时,游戏不会't以Javascript结尾
- javascript在foucs()后显示光标
- 使用Javascript对RGBA颜色进行光标控制的形状随机化
- 在光标位置插入HTML,并使用javascript将光标移动到插入的HTML的末尾
- 如何使用javascript禁用临时光标
- 如何在 html 和 javascript 中的特定输入文本中设置光标位置
- 当鼠标空闲时强制 Chrome 光标更新原版 JavaScript
- 如何使用jquery/javascript使光标停留为文本上的指针
- IE9 和 10 不反映 JavaScript 光标更改
- Javascript光标图像位置