Question

我有textarea。现在，一旦你写了“#q + number＃”（例如＃q1＃），我就想这样做，它会创建新的输入字段。例如，如果你写道：“你好我的名字是＃q1＃，我最喜欢的食物是＃q2＃”。它将打开两个输入字段。

当你删除其中一个#q + number＃时，它将删除与#q＃

相同的字段

例如：如果你写“你好我的名字是＃q1＃而我最喜欢的食物是＃q2＃，输入字段看起来像那样：

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

接下来我删除＃q1＃它看起来应该是这样的：

并且不要删除q =“2”输入的值。

我怎样才能在jQuery / JavaScript中做到这一点？

Answer 1

看看这个快速小提琴http://jsfiddle.net/NgxvP/1/

Answer 2

这里有一些东西要开始玩

<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>

已编辑：，以避免附加无序输入文本字段，但显示它们始终按其索引排序，如dfsq答案

中所述

为方便起见，我创建了一个jsfiddle http://jsfiddle.net/2HA5s/

在textarea中编写#Q＃时打开输入

2 个答案: