Use Enter to tab to next div, not input?

Question

Got a funky one i cant quite solve. I am using Divs that are contenteditable to receive info from the customer, Tabbing through works fine but it would be even speedier if i could simply hit Enter to tab to the next div and im not sure how to achieve this.

I Created this fiddle here: http://jsfiddle.net/zkDfm/

 <div class="card shadow rounded">
<div class="card-content one-third">
    <div class="list-title">Owner Details</div>
    <ul class="detail-list">
        <li class="button rounded"><a class="list-heading">Mr:</a> <a class="list-result-edit" contenteditable="true"></a></li>
        <li class="button rounded"><a class="list-heading">Mrs:</a> <a class="list-result-edit" contenteditable="true"></a></li>
        <li class="button rounded"><a class="list-heading">Email:</a> <a class="list-result-edit" contenteditable="true"></a></li>
        <li class="button rounded"><a class="list-heading">Mobile No:</a> <a class="list-result-edit" contenteditable="true"></a></li>
        <li class="button rounded"><a class="list-heading">Phone No:</a> <a class="list-result-edit" contenteditable="true"></a></li>
        <li class="button rounded"><a class="list-heading">Address:</a> <a class="list-result-edit" contenteditable="true"></a></li>
    </ul>
</div>

if a content is editable, the enter-key is already used by a funky stuff called `newline` (wired thing, often used in books and on end of a line). — Grim, Jul 16 '14 at 11:13

j809 · Accepted Answer · 2014-07-16T12:12:38.717

4

You can look here:

DEMO

So, your Enter keyevent be would like:

$(".list-result-edit").keypress(function(e) {
    if(e.which == 13) {
        e.preventDefault();
        $(e.target).parent().next().children().focus();
    }
});

EDIT

If you are having multiple block like you mentioned, this take just a little more work.

$(".list-result-edit").keypress(function(e) {
    if(e.which == 13) {
        e.preventDefault();
        if($(e.target).parent().is(":last-child")) {
            $(e.target).parents(".card-content").next().find(".list-result-edit:first").focus();
        }
        else {
            $(e.target).parent().next().children().focus();
        }
    }
});

DEMO

edited Jul 16 '14 at 12:12

answered Jul 16 '14 at 11:20

j809

1,499
1
12
22

@Downvoter Did I misunderstand the question? – j809 Jul 16 '14 at 11:22
Smashed it mate, exactly what i was wanting to achieve – 22Ryann Jul 16 '14 at 11:25
@j809 well, it's easy to fix someone's downvote :) – Regent Jul 16 '14 at 11:29
Is there a simple way to check if $(e.target).parent().next().children().focus(); has a result or not? so i can somehow skip across to another group of these
tags?

22Ryann

Jul 16 '14 at 11:37

What do you mean by `result`? I cannot get you... Can be a little clear? – j809 Jul 16 '14 at 11:40

There is multiple blocks of the li tags that float next to eachother so once i 'enter' to the bottom of the list, it would be nice to be able to jump over into the next block of li tags, as 'tab' would. – 22Ryann Jul 16 '14 at 11:43

Can I know how the new block html is? Does the new block mean a new `ul` list or does it mean new block starting with `div` with class `list-title`? – j809 Jul 16 '14 at 11:53

Check it out bud http://jsfiddle.net/zkDfm/6/ – 22Ryann Jul 16 '14 at 12:00

Ok got it... So here you go: http://jsfiddle.net/zkDfm/8/ I editted the asnwer as well accordingly. – j809 Jul 16 '14 at 12:10

Really slick implementation! Nice, Thankyou! always so simple in hindsight. (Still novice with Jquery) – 22Ryann Jul 16 '14 at 12:17

You always go through that stage :) – j809 Jul 16 '14 at 12:28

Use Enter to tab to next div, not input?

1 Answers1