在文本区域中写入#Q#时打开输入

发布于 2024-12-28 11:58:22 字数 423 浏览 2 评论 0原文

我有文本区域。现在，我想这样做，一旦你写“#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 中做到这一点？

原文

I have textarea. Now, I want to do that once you write "#q + number#" ( e.g. #q1# ), it will create new input field.
For example if you write: "Hello my name is #q1# and my favorite food is #q2#". It will open two input fields.

And when you delete one of those #q + number#, it will delete the same field that was intended to the #q#

For example: if you write "Hello my name is #q1# and my favorite food is #q2#, and the input fields look like that:

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

and next that I delete the #q1# it supposed to look like that:

and don't delete the value of q="2" input.

How can I do that in jQuery/JavaScript?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

音盲 2025-01-04 11:58:22

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

回复收藏 0 原文

东北女汉子 2025-01-04 11:58:22

在这里，您可以开始使用

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

Here you have something to start playing with

<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: to avoid appending unordered input text fields, but showing them always ordered by their index, as commented in dfsq answer

I created a jsfiddle for your convenience http://jsfiddle.net/2HA5s/

回复收藏 0 原文

~没有更多了~