获得插入符号的位置(字符索引)在输入字段上掉落事件(FF, Chrome)

Question

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

获取插入符号位置:

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

FF, Chrome: inputfield.selectionStart不工作

任何想法我怎么能得到字符索引在下降处理程序?

Answer 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中测试，但它应该在所有浏览器中也工作。

我希望这就是你要找的。

Answer 2

访问以下链接

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

我认为它对你很有用。