如何从输入字段中获取插入位置?
我通过谷歌发现了一些零碎的东西,但没有任何防弹措施.
基本上像jQuery插件这样的东西是理想的,所以我可以简单地做
$("#myinput").caretPosition()
Run Code Online (Sandbox Code Playgroud) IE允许我在输入元素中创建一个文本范围,我可以在其上调用getBoundingClientRect()并获取某个字符或光标/插入符号的像素位置.有没有办法在其他浏览器中以像素为单位获取某个角色的位置?
var input = $("#myInput")[0];
var pixelPosition = null;
if (input.createTextRange)
{
var range = input.createTextRange();
range.moveStart("character", 6);
pixelPosition = range.getBoundingClientRect();
}
else
{
// Is there any way to create a range on an input's value?
}
Run Code Online (Sandbox Code Playgroud)
我正在使用jQuery,但我怀疑它能否解决我的问题.我期待一个纯JavaScript解决方案,如果有的话,但欢迎jQuery的答案.
我认为在表单输入中劫持空格键是一件简单的事情,这样它就像连字符一样起作用.通常jQuery使这样的东西非常简单.
我试过的代码是这样的:
$("#StreamUrl").keydown(function (e) {
if (e.keyCode == 32) return 109;
});
Run Code Online (Sandbox Code Playgroud)
但这没有任何效果.我尝试了一个更简单的脚本:
$("#StreamUrl").keydown(function (e) {
//if (e.keyCode == 32) return 109;
alert(e.keyCode);
});
Run Code Online (Sandbox Code Playgroud)
此脚本在空间按下时正确警告32,在连字符按下时正确警告109.此外,我没有JavaScript错误.
为什么不行if (e.keyCode == 32) return 109;?当我更换那条线时,if (e.keyCode == 32) alert("space!!");我正确地得到警报,所以我知道正确地if返回true.
是什么赋予了?
感谢@Nick指出了复制粘贴问题.我最后得到了一点混合动力.这是我已经开始工作的代码,它既平滑又处理复制/粘贴.
$("#StreamUrl").keydown(function (e) {
if (e.keyCode == 32) {
$(this).val($(this).val() + "-"); // append '-' to input
return false; // return false to prevent space from being added
}
}).change(function (e) {
$(this).val(function …Run Code Online (Sandbox Code Playgroud)
我正在开发一个富文本编辑器。我想当用户ctrl+space在触发事件的位置按下按键时打开用户定义的上下文菜单。
我没有得到事件的坐标。有没有可能获得事件坐标?
这是我的示例代码
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style>
#edit{
border:1px solid red;
width:500px;
height:300px;
}
#ctxMenu{
display: none;
position: absolute;
border: 1px solid #000000;
}
#ctxMenu ul li{
list-style: none;
}
</style>
</head>
<body>
<div id="edit" contenteditable="true">
</div>
<div id="ctxMenu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<script>
$('#edit').keydown(function(e){
/**** get x, y coordinates.
*
*/
if (e.ctrlKey && e.keyCode == 32) {
$('#ctxMenu').show().css({left:x,top:y});
}
});
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud) 如何用jquery(也应该在IE6中工作)在textarea内捕获"光标位置更改"的事件?
example1:
之前:文字|
之后:te |
例2:
之前:文字|
之后:text tex | t2
例3:
之前:文字|
之后:|
编辑:
在捕获游标事件之后还需要检查光标是否改变了他的位置(也必须为ie6工作)
编辑2:
如果你的解决方案不能在ie6中工作,但在ie7 + webkit中请写出来
谢谢,
优素福
我试图将文本框中的字符转换为大写.
但这似乎影响了我的光标位置.
JS小提琴下面:
$(this).val($(this).val().toUpperCase());
Run Code Online (Sandbox Code Playgroud)
如果我在空白文本框中输入一切都很好......但如果我尝试在文本之间键入,则光标会立即转到单词的末尾.
如何防止它发生,我的光标应该是我停止输入的位置,而不是文本的末尾.
在Firefox中运行良好,IE搞砸了.我需要它在IE上工作