Create a function for a certain item in array

Question

I'm trying to create a text input using key navigation. With left and right arrows you choose position, on enter you activate the current letter and then you can choose letter with up and down keys.

What I want to achieve is a delete function, so for example, if I choose the < sign and press enter the current letter should be deleted or at least not visible. Is this even possible to do without using more keys?

This is my code:

var app = angular.module('ccApp',[]);

    var letters = [
                    '<','a','b','c','d','e','f','g','h','i','j','k','l','m','n'
                ];

    app.controller("ccInputController",function($scope, $http) {

        $('li:first').focus();

            $('li').on('keydown', function(e){

                    e.preventDefault();

                    var keyCode = e.which;
                        key = {up: 38, down: 40, right: 39, left: 37, enter: 13};

                    letterIndex = letters.indexOf($(this).html());

                    switch(e.which) {
                        case key.up:
                        if ($('li').hasClass('active')) {
                            letterIndex = letterIndex + 1;
                                $(this).html(letters[letterIndex]);
                        }

                        break;

                        case key.down:
                            if ($('li').hasClass('active')) {
                            letterIndex = letterIndex - 1;
                                $(this).html(letters[letterIndex]);
                        }
                        break;

                        case key.right:
                            // check if li is not active, then move right
                            if (!$('li').hasClass('active')) {
                                $('li:focus').closest('li').next().focus();
                            }
                        break;

                        case key.left:
                            // check if li is not active, then move left
                            if (!$('li').hasClass('active')) {
                                $('li:focus').closest('li').prev().focus();
                            }
                        break;

                        case key.enter:
                            $(this).closest('li').toggleClass('active');
                        break;

                    }

            });
        });

And the HTML:

<ul>
    <li tabindex="0">i</li>
    <li tabindex="0">n</li>
    <li tabindex="0">p</li>
    <li tabindex="0">u</li>
    <li tabindex="0">t</li>
</ul>

Fiddle

I'm still a little unclear about your goals... what exactly is supposed to happen when you hit enter? Can you just do something like $(this).closest('li').remove()? — Will Reese
– Will Reese, Commented May 13, 2015 at 8:16
The problem is enter is toggle the active state, so when you press enter on a letter that letter is activated and you can choose it. But I want the enter key also act as remove but only if you choose the < symbol. — pistevw
– pistevw, Commented May 13, 2015 at 8:21

Amit · Accepted Answer · 2015-05-13 08:30:48Z

1

To remove any element using jquery, simply call remove(). In your case, on the enter handler, after validating the value matches, use $(this).remove().

Also, you need to use .text() instead of .html() because the < gets transformed to < in html.

Corrected fiddle

answered May 13, 2015 at 8:30

Amit

46.4k9 gold badges83 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pistevw Over a year ago

Oh, thank you so much!! I felt like I was pretty close but didn't think of the 'if(letterIndex == 0...'. That made it!

Collectives™ on Stack Overflow

Create a function for a certain item in array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related