Input text not selectable

Question

I have a problem with jQuery. I'm working on a table in which every <td> has an <input> inside. I use this in order to make the Tab key advance the focus by columns:

var i = 0;
$('#pl_table tr').each(function () {
    $(this).find('td').each(function (i) {
        $(this).find('input').attr('tabindex', i + 1);
    });
});

My problem is it's not possible to select input values from table inputs if I use this code. Nor using Shift + arrows even with the mouse.

table row looks like this:

<tr class='tripRow nopair' id='1'>
    <td class='drop'></td>
    <td id='col1' class='check'>
        <input name='tripRow1[]' type='checkbox' name='maked' value='marked' />
    </td>
    <td id='col2' class='center'>
        <input name='tripRow1[]' type='text' value='' size='2' />
    </td>
    <td id='col3' class='center'>
        <input name='tripRow1[]' type='text' value='' maxlength='10' size='10' readonly />
    </td>
    <td id='col4' class='center'>
        <input name='tripRow1[]' type='text' value='' maxlength='6' size='4' />
    </td>
    <td id='col5' class='center'>
        <input name='tripRow1[]' type='text' value='' maxlength='1' size='1' />
    </td>
    <td id='col6' class='center'>
        <input class='dispatch' name='tripRow1[]' type='text' value='' />
    </td>
    <td id='col7' class='center'>
        <input name='tripRow1[]' type='text' value='' />
    </td>
    <td id='col8' class='center'>
        <input name='tripRow1[]' type='text' value='' maxlength='3' size='3' />
    </td>
    <td id='col9' class='center'>
        <input name='tripRow1[]' type='text' value='' maxlength='10' size='10' />
    </td>
    <td id='col10' class='center'>
        <input name='tripRow1[]' class='timePicker' type='text' value='' maxlength='8' size='8' />
    </td>
    <td id='col11' class='center'>
        <input name='tripRow1[]' class='timePicker' type='text' value='' maxlength='8' size='8' />
    </td>
    <td id='col12' class='center'>
        <input name='tripRow1[]' class='timePicker' type='text' value='' maxlength='8' size='8' />
    </td>
</tr>

I know one of these <td>s is readonly, but I have the problem with others also. I'm using IE10.

Any suggestions? Thank you very much for your help.

Notice that `i` is only in the scope of the `find()` for each td. Meaning that every input is going to have tabindex="1". If you define i outside that function and increment it, you'll have sensible tabindex values. — Tap, Nov 04 '14 at 20:53
yes I forgot the table id but it's actually working because you're trying to default tabindex order, left to right. Am I right? — Okan Kocyigit, Nov 04 '14 at 20:54
The problem is not this code. The thing is with this code it's not possible to select the text value from the inputs. If I remove this code I can do it. You know what I mean? — jonal, Nov 04 '14 at 20:56
ocanal I want tab to move across columns not from left to right. — jonal, Nov 04 '14 at 21:04
Maybe because of the i index the IE gets crazy and it does not work? — jonal, Nov 04 '14 at 21:05

score 0 · Answer 1 · answered Nov 04 '14 at 21:44

0

If I didn't get wrong, you want to up to down order, you need some code like this,

$(function () {
    var tdLength = $("#pl_table tr:first td").length;
    var k = 0;
    for (var i = 0; i < tdLength; i++) {
        $('#pl_table tr').each(function () {
            $(this).find('td:eq(' + i + ') input').attr('tabindex', k++)
        });
    }
});

JSFiddle DEMO

answered Nov 04 '14 at 21:44

Okan Kocyigit

13,203
18
70
129

With previous code as it is now `var i = 0;` It works fine. The problem is that **in IE** it is not possible to select input text in order to copy it to another input. It does work in Chrome. I thought It was because of this function but it is not. Sorry. – jonal Nov 05 '14 at 13:52
I found this: [http://stackoverflow.com/questions/1836008/cant-select-text-in-input-box-on-ie] Maybe it has relation with the fact that my table is sortable? I do not use dojo. I just use this to make table rows to be sorted. `$('#pl_table tbody').sortable({ stop: function( event, ui ) { paint(); } });` – jonal Nov 05 '14 at 15:47

Input text not selectable

1 Answers1