1

最初のクリックと2回目のクリックの間に行を選択する複数の選択機能を追加したテーブルがありshift + clickますが、行間のすべてのテキストが強調表示されます。

CSSを介したテキスト選択を無効にしたくないのは、複数選択機能が起動したときにShiftキーを押しながらクリックしたときだけでなく、実際に選択可能である必要があるためです。

これはできますか？

    var lastChecked;    
    $("#contact_table tr").click(function(e) {
        if (e.target.getAttribute('type') == 'checkbox') {
            return;
        };  
        if (e.shiftKey && lastChecked) {
            // select between last point and new point
            var tableRows = $("#contact_table tr");
            var newRow = tableRows.index($(this));
            var oldRow = tableRows.index(lastChecked);
            if (oldRow < newRow) {
                newRow = newRow +1;
            }
            var sliceRange = [newRow, oldRow].sort();
            var selectedRows = tableRows.slice(sliceRange[0], sliceRange[1])
                .find('input[type=checkbox]').attr('checked', true);
        } else {
            var checkbox = $(this).find('input[type=checkbox]');
            var checked = toggleCheckbox(checkbox);
            if (checked) {
                lastChecked = $(this);
            }               
        };
        recalculateSelectedButton();
    });
4

2 に答える 2

1

チェックされたチェックボックスの数に基づいて、ユーザー選択を無効にしてみてください。user-select: none;存在する場合は、CSSスタイル（およびプレフィックス付きバージョン）をに追加するだけ#contact_tableです。

現在のjavascriptコードとテーブルをjsfiddleに提供する場合は、コードもテストします-現在はそのままです;）キャンセルされたイベントのバブリングなどでクリック操作がどのように実行されるかはわかりません。また、この実装では、チェックボックスがオンになっている場合でも、ユーザーがテキストを選択する可能性があることを考慮していません（したがって、探しているものではない可能性があります）。

$(function() {
    var $contactTable = $("#contact_table"),
        userSelectNoneClass = "user-select-none";

    $contactTable.on("change", ":checkbox", function(e) {
        var numberOfCheckedRows = $("#contact_table :checkbox:checked").length,
            anyCheckedRows = (numberOfCheckedRows > 0);

        if (anyCheckedRows && $contactTable.hasClass(userSelectNoneClass)) {
            $contactTable.addClass(userSelectNoneClass);
        } else {
            $contactTable.removeClass(userSelectNoneClass);
        }
    });
});

.user-select-none
{
    /* From https://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

編集：代わりに変更イベントを使用します。

于 2012-08-15T21:03:56.990 に答える
1

JavaScript を使用してすべてのテキストの選択を解除できます。RemoveSelection()複数選択ロジックを実行した後に呼び出しを追加します。

http://help.dottoro.com/ljigixkc.phpからFirefox で選択をクリアする

function RemoveSelection () {
    if (window.getSelection) {  // all browsers, except IE before version 9
        var selection = window.getSelection ();                                        
        selection.removeAllRanges ();
    }
    else {
        if (document.selection.createRange) {        // Internet Explorer
            var range = document.selection.createRange ();
            document.selection.empty ();
        }
    }
}
于 2012-08-15T21:47:40.217 に答える