2

入力フィールドが数値のみを受け入れるようにしたいので、他の手法の中でも、入力フィールドの結果が正しい数値でない場合は、デフォルトのドロップイベントも防止しました。これを実現するために、IEでは、テキストをドロップするフィールドにフォーカスし、カーソル位置（文字インデックス）を検索してから、古い値とドラッグされたテキストから新しい値を作成します。

カレットの位置を取得するには：

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

FF、Chrome： inputfield.selectionStart機能しません

ドロップハンドラーで文字インデックスを取得するにはどうすればよいですか？

4

2 に答える 2

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でテストされていますが、すべてのブラウザでも機能するはずです。

これがあなたが探していたものであることを願っています。

于 2013-01-11T10:25:33.200 に答える
-1

次のリンクにアクセスしてください

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

役に立つと思います。

于 2013-01-11T09:08:41.903 に答える