为数组中的某个项创建一个函数

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?

我想要实现的是删除功能,例如,如果我选择 <符号并按回车键,则应删除当前字母或至少不可见。这甚至可以不使用更多键吗?< p>

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:

和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

1 个解决方案

#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().

要使用jquery删除任何元素,只需调用remove()即可。在您的情况下,在输入处理程序上,在验证值匹配后,使用$(this).remove()。

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

此外,您需要使用.text()而不是.html(),因为 <变换为<在html中。< p>

Corrected fiddle

#1