javascript - 在放置事件(FF，Chrome)的输入字段中获取插入符号位置(字符索引)

Question

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

获取插入位置:

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

FF，Chrome: inputfield.selectionStart 不起作用

关于如何在放置处理程序中获取字符索引有什么想法吗？

Answer 1

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

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

在你的 drop handler 里面，但是由于他们说的“安全原因”，它不会工作。很遗憾，因为这对您来说是最好的解决方案，我的意思是在文本被删除之前更改它。

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

<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 中测试，但它应该也适用于所有浏览器。

我希望这就是您要找的。