一个输入 - 两种风格？左侧光标：文本，右侧光标：指针？

问题描述：

有没有一种方法（使用JavaScript/jQuery）做以下事情：一个输入 - 两种风格？左侧光标：文本，右侧光标：指针？

在我的页面上，我有一个输入类型=文本。该输入在其右侧具有背景图像。

<input id="my-input" type="text" value="foobar" style="background-image:url(path/to/my/image.gif); background-position:right center; background-repeat:no-repeat; height:17px; width:97px;"/>

当光标在背景图像（宽度：21px）上移动时，光标图标应设置为指针。否则，它应该是光标：文本。

我必须使用输入！我无法在此图标的输入旁边创建新的div！

我试图解决这个问题是这样的：

$('#my-input').mousemove(function (event) { 
    this.style.cursor = ((event.offsetX || event.layerX) < this.offsetWidth - 21) ? "text" : "pointer"; 
});

但是，这是行不通的。 this.offsetWidth - 21具有正确的值，但event.layerX和event.offsetX未定义。

你有另外一个想法，该如何解决这个问题？你能告诉我，为什么我的js不能按我想要的那样工作？

测试，并在Chrome http://jsfiddle.net/LVG7S/ – Reigel 2010-07-08 06:12:02

工作哇，它在Chrome和Firefox和IE浏览器的工作。那么，问题是什么？ – TNi 2010-07-08 06:17:21

'eventObject.offsetX/Y'不是跨浏览器。 – jAndy 2010-07-08 06:18:41

答

我试过这种方式，其工作（在IE浏览器进行测试）。检查出here。

$('#my-input').mousemove(function (event) { 

    $(this).css("cursor", ((event.offsetX || event.layerX) < this.offsetWidth - 21) ? "text" : "pointer"); 

});

OP的给定代码也在工作中......请阅读我的意见下面的OP的帖子.. – Reigel 2010-07-08 06:17:28

你是对的。这是行得通的。因此，我必须在我的其他代码中查找我的错误。 – Newbie 2010-07-20 06:46:36

答

鼠标位置是我总是仰望的问题之一。这是一个solution。特别注意，半路向下是显示如何确定相对于所讨论的对象的左上角（例如文本字段）的鼠标位置的片段。这可能与解决您的问题有关。

也许像下面将工作

$('#my-input').mousemove(function(e) { 
    var pos = e.pageX - this.offsetLeft; 
    this.style.cursor = (pos < this.offsetWidth - 21) ? 'text' : 'pointer'; 
});

一个输入 - 两种风格？左侧光标：文本，右侧光标：指针？

相关推荐