I have a set of text boxes in a table and i want to select multiple text box values by pressing shift+down arrow.

Question

I have a set of text boxes in a table and i want to select multiple text box values by pressing shift+down arrow. while selecting the text boxes the values should be copied and stored in an array... please someone help me out...

<style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  </style>
<script>

$(function(e) {


    $( "#selectable" ).selectable({selected: function( event, ui ) {alert(this)}});
  });

</script>
<body>
<table width="78%" border=1 id="selectable" style="border-collapse:collapse">
<tr>
<td><input type="text" class="ui-widget-content"   /></td>
<td><input type="text"  class="ui-widget-content"/></td>
<td><input type="text"  class="ui-widget-content"/></td>
<td><input type="text"  class="ui-widget-content"/></td>

</tr>
<tr>
<td><input type="text"  class="ui-widget-content"/></td>
<td><input type="text"  class="ui-widget-content"/></td>
<td><input type="text"  class="ui-widget-content"/></td>
<td><input type="text"  class="ui-widget-content"/></td>

</tr>
<tr>
<td><input type="text"  class="ui-widget-content"/></td>
<td><input type="text"  class="ui-widget-content"/></td>
<td><input type="text"  class="ui-widget-content"/></td>
<td><input type="text"  class="ui-widget-content"/></td>

</tr>
<tr>
<td><input type="text"  class="ui-widget-content"/></td>
<td><input type="text"  class="ui-widget-content"/></td>
<td><input type="text"  class="ui-widget-content"/></td>
<td><input type="text"  class="ui-widget-content"/></td>

</tr>
</table>
</body>
</html>

That functionality is not 'standard' so I wouldn't recommend it as it will confuse your users when using other applications as shift+down is normally associated with a range. Why not do something intuitive, like place a checkbox next to the input box. — crafter, Oct 09 '13 at 08:21

score 0 · Answer 1 · answered Oct 09 '13 at 07:58

0

Use jquery.

you can use

 $("your id").keypress(function(e){
    //here you find e.KeyCode if it is equal to shift+down_arrow then take the values of text box here as $("#yout text box id").val(); and store it into an array.

    });

answered Oct 09 '13 at 07:58

Rahul

710
1
8
25

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

Based on the questions:

left click

shift down

    $(function(e) {
      var store = {
        selectedText: ''
      };
      $("#selectable").bind('mousedown', function(e) {        
        if (e.shiftKey && e.which === 1) {
          store.selectedText += e.target.value;
          $('#selectedText').html(store.selectedText);
        }
      });
    });

See JsFiddle

edited May 23 '17 at 12:29

Community

1
1

answered Oct 09 '13 at 08:11

Lei Cao

457
6
13

Stphane · Answer 3 · 2015-10-27T14:02:45.547

Here is an piece of code that will let you check unchecked boxes and get values of those boxes (using Shift + arrows up/down) ...

Full working code here => fiddle

You may tweak it a bit so that it will fit your needs.

$(function () {
    var keys = {},    // Keys strokes state
        storage = {}; // Tracking of checked checkboxes values
    $(document).keydown(function (e) {
        // UPDATE Keys strokes state to memorize simultaneous keydown ...
        // THEN update values storage
    }).keyup(function (e) {
        // UPDATE Keys strokes to remove released keys
    }).click(function(e){
        // UPDATE values storage in case a checkbox get clicked ...
    });
});

I have a set of text boxes in a table and i want to select multiple text box values by pressing shift+down arrow.

3 Answers3