TAB keypress capturing not working

Question

Hi I have written this JS script to capture a TAB keypress capture. It captures and insert a \t in the current pointer location in the "pre" tag.

$m = jQuery.noConflict();
    $m(document).keydown(function(event) {

    var keyCode = event.which;
      if(keyCode == 9) { 
           // alert(); if this is there the code works, but if i remove this the code doesn't work, i dont want to alert user every time he hits TAB

        // get caret position/selection
            var start = this.selectionStart;
            var end = this.selectionEnd;

            var $this = $m(this);
            var value = $this.val();

            // set textarea value to: text before caret + tab + text after caret
            $this.val(value.substring(0, start)
                    + "\t"
                    + value.substring(end));

            // put caret at right position again (add one for the tab)
            this.selectionStart = this.selectionEnd = start + 1;

            // prevent the focus lose
            event.preventDefault();
      }
    });

<div class="masterContainer" onclick="setFocusDiv();">
            <div class="lined"></div>
            <pre id="inputId" class="nonlined" contenteditable="true" onkeyup="setLineNu();" onfocus="setLineNu();"></pre>
        </div>

but my problem is that when i insert an alert in the script it works perfectrly and insert the \t but when i remove the alert then it does not work. Also there is a focus event there but the focus is lost after the TAB press.

try event.preventDefault(); instead of this.preventDefault(); — Mivaweb, May 20 '14 at 16:21
@VDesign it works !! now the base problem. that it only works when i put an alert. — user614946, May 20 '14 at 16:24
Can you change your question with an edit of the event.preventDefault();? So that only your base problem is still visible. — Mivaweb, May 20 '14 at 16:26
You are using jQuery, there is no need for `event.keyCode || event.which`. Just use [`event.which`](http://api.jquery.com/event.which/), jQuery normalizes this for you. — gen_Eric, May 20 '14 at 16:35
@RocketHazmat yes but even after doing it didn't solve the problem .. as if i put a alert then this works fine.. any idea — user614946, May 20 '14 at 16:38
The `alert()` doesn't help your code run. When you add the `alert()`, your code is *paused* until it's closed. Before your code pauses, a tab character is entered into the `
`, but it's not your code doing that, it's the browser since you have not called `event.preventDefault()` yet. Add `console.log(start, end, value);` to see what I mean. Regardless of the `alert()`, you will see `undefined`. Try also replacing your code with `$(document).keydown(function(event){ alert(); });` to see what I mean. — gen_Eric, May 20 '14 at 16:51
@RocketHazmat I saw that its undefined- but how to overcome this? — user614946, May 20 '14 at 16:54
@user614946: I think it's because `.selectionStart`, `.selectionEnd`, and `.val()` only work on ``s, not `
`. Instead of `.val()`, try `.text()`. As for the caret position, I'm not sure. — gen_Eric, May 20 '14 at 16:56
@RocketHazmat yes i understand but i need pre in this case, also tried your approch fot .text() but i gives me this "Cannot call method 'createDocumentFragment' of null " — user614946, May 20 '14 at 17:00
@user614946: I just noticed this too. It's because `this` is the `document`, not the element you are typing in. Try `var $this = $(event.target); var value = $this.text();`. — gen_Eric, May 20 '14 at 17:01
@RocketHazmat yes i also came to this.. but now a different prob.. its repeating the text after every tab.. thanks man :) got one thing here"start and en are undefined" — user614946, May 20 '14 at 17:06
http://stackoverflow.com/a/3976125 and http://stackoverflow.com/a/6249440 might be useful. Something like `getCaretPosition(event.target);`. — gen_Eric, May 20 '14 at 17:27

score 0 · Accepted Answer · answered May 20 '14 at 16:22

0

You need to call preventDefault() on your event instead of on this

answered May 20 '14 at 16:22

Ad Fundum

665
6
22

it works !! now the base problem. that it only works when i put an alert. – user614946 May 20 '14 at 16:26

TAB keypress capturing not working

1 Answers1