Открытие ввода при записи # Q # в textarea - PullRequest
Новая
       11

Открытие ввода при записи # Q # в textarea

0 голосов
/ 22 января 2012

У меня есть текстовая область.Теперь я хочу сделать это, как только вы напишите «#q + number #» (например, # q1 #), это создаст новое поле ввода.Например, если вы напишите: «Здравствуйте, меня зовут # q1 #, а моя любимая еда - # q2 #».Откроется два поля ввода.

И когда вы удаляете один из этих #q + номер #, он удалит то же поле, которое было предназначено для # q #

Например: если вы напишите «Здравствуйте, меня зовут # q1 # и мой любимыйfood - это # ​​q2 #, а поля ввода выглядят так: 

<input type="text" q="1" />
<input type="text" q="2" />

, а затем я удаляю # q1 #, он должен выглядеть так:

и не удаляйте значение ввода q = "2".

Как это сделать в jQuery / JavaScript?

Ответы [ 2 ]

0 голосов
/ 22 января 2012

Здесь вы можете начать играть с 

<html>

<head>

    <style>

        #inputField {   position:relative;
                        width: 200px;
                        height: 200px;
                        background-color: #cda;
                    }

    </style>

    <script src="jquery-1.7.1.min.js"></script>
    <script>

        // in_array function provided by phpjs.org
        function in_array (needle, haystack, argStrict)
        {
            var key = '',
                strict = !! argStrict;

            if (strict)
            {
                for (key in haystack)
                {
                    if (haystack[key] === needle)
                    {
                        return true;
                    }
                }
            }
            else
            {
                for (key in haystack)
                {
                    if (haystack[key] == needle)
                    {
                        return true;
                    }
                }
            }
            return false;
        }

        var addedFields = new Array();
        function checkFields(input, charCode)
        {
            var text = (charCode) ? input.value + String.fromCharCode(charCode) : input.value;

            var pattern = /#q[0-9]#/g;
            var matches = text.match(pattern);
            if (!matches) { matches = new Array(); }


            if (addedFields.length>0 && addedFields.length != matches.length)
            {
                for (var index in addedFields)
                {
                    if (!in_array('#q'+ index +'#', matches))
                    {
                        $('#q'+index).remove();
                        delete addedFields[index];
                    }
                }
            }

            if (matches)
            {
                for (var i=0; i<matches.length; i++)
                {
                    var code = matches[i];
                    var index = code.match(/[0-9]/)[0];
                    if ( $('#q'+index).length == 0 )
                    {
                        addFields(index);
                    }
                }
            }
        }

    function addFields(i)
    {
        addedFields[i] = true;
        var fields = '';
        for (var index in addedFields)
        {
            fields += '<input type="text" q="'+ index +'" id="q'+ index +'" />';
        }
        $('#inputField').html(fields);
    }

    </script>
</head>

<body>
<div id="formID">
    <form>
        <textarea onkeypress="checkFields(this, event.charCode); return true;" onkeyup="checkFields(this); return true;"></textarea>
        <div id="inputField"></div>
    </form>
</div>
</body>

</html>

EDITED: , чтобы избежать добавления неупорядоченных текстовых полей ввода, но показывать их всегда в порядке их индекса, как прокомментировано в dfsq ответ

Я создал jsfiddle для вашего удобства http://jsfiddle.net/2HA5s/

0 голосов
/ 22 января 2012

Взгляните на эту быструю скрипку http://jsfiddle.net/NgxvP/1/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...