在放置事件（FF，Chrome）的输入字段中获取插入符号位置（字符索引）答案

【问题标题】：Get caret position (character index) in input field on drop event (FF, Chrome)在放置事件（FF，Chrome）的输入字段中获取插入符号位置（字符索引）
【发布时间】：2013-01-11 18:25:33
【问题描述】：

我希望输入字段仅接受数字，因此，在其他技术中，如果输入字段中的结果不是正确的数字，我还阻止了默认放置事件。为此，在 IE 中，我将焦点放在要放置文本的字段，搜索光标位置（字符索引），然后根据旧值和拖动的文本构造新值。

获取插入符号位置：

IE: Math.abs(document.selection.createRange().moveStart("character", -1000000)) 工作

FF，Chrome： inputfield.selectionStart 不起作用

任何想法如何在放置处理程序中获取字符索引？

【问题讨论】：

不知道为什么您的代码不起作用，但我可以建议一种更简单的方法来解决您的问题吗？与其处理所有可能的事件，不如使用一个计时器定期检查字段的内容，并在它不是有效数字的情况下将其恢复为最后一个已知的正确值。
它可能无法正常工作，因为此时光标实际上并不存在，该事件是鼠标事件。无论如何，谢谢你的建议，我会考虑的。

标签： javascript jquery

【解决方案1】：

关于如何在浏览器中实现拖放支持有很多讨论，但事实是他们希望保护事物。我的意思是理论上你可以打电话

event.dataTransfer.setData("Text", newValue)

在您的放置处理程序中，但由于他们所说的“安全原因”，它无法工作。很遗憾，因为这对您来说是最好的解决方案，我的意思是在删除之前更改文本。

相反，我认为你可以通过一个小“黑客”来解决你的问题

<input id="target" type="text" value="aaa bbb ccc" />
<input id="source" type="text" value="good bad" />

和js

<script type="text/javascript">
    $(function () {
        var drop = false;
        $("#target").bind("drop", function (e) {
            // you can store the dragged text if you like
            //var text = e.originalEvent.dataTransfer.getData("Text");
            drop = true;
        });
        $("#target").bind("focus", function (e) {
            if (drop) {
                // you can get caret here, etc
                $("#target").val($("#target").val().replace("bad", ""));
                drop = false;
            }
        });
    });
</script>

在 Chrome 中测试，但它也应该适用于所有浏览器。

我希望这就是你要找的。p>

【讨论】：

谢谢，几乎完美的解决方案，只需要将焦点事件更改为输入，否则焦点处理程序中目标对象的当前值仍然是旧值，没有拖动文本。跨度>
我很高兴能帮上忙。另一个解决方案（仍然是 hack）是在 drop 处理程序中使用 setTimeout([fn to parse the updated text], 100) 。这就像一个不存在的 afterDrop 事件

【解决方案2】：

访问以下链接

https://groups.google.com/forum/?fromgroups=#!topic/javascript-information-visualization-toolkit/GJVG2laTaUo

我觉得对你有用。

【讨论】：

欢迎来到 SO！这不是我们想要的答案。请解释您的建议并提供一些代码示例。