Question

我尝试使用键导航创建文本输入。使用向左和向右箭头选择位置，在输入时激活当前字母，然后您可以选择带有向上和向下键的字母。

我想要实现的是删除功能，例如，如果我选择<符号并按Enter键，则应删除当前字母或至少不可见。这甚至可以不使用更多的密钥吗？

这是我的代码：

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;

                    }

            });
        });

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

Answer 1

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

此外，您需要使用.text()代替.html()，因为<会在html中转换为<。

Corrected fiddle

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

1 个答案: