Question

目标：允许用户将表单字段链接到来自不同div的内容中的特定位置，然后附加单个输入字段＆＃39;分别发送到这些特定位置的文本。

HTML：

<form>
    <div>
        <label for="1">One:</label>
        <input type="text" id="1" />
    </div>
    <div>
        <label for="2">Two:</label>
        <input type="email" id="2" />
    </div>
    <div>
        <label for="3">Three:</label>
        <input type="email" id="3" />
    </div>
    <div>
        <label for="4">Four:</label>
        <input type="email" id="4" />
    </div>
    <div>
        <label for="5">Five:</label>
        <input type="email" id="5" />
    </div>
    <div>
        <label for="6">Six:</label>
        <input type="email" id="6" />
    </div>
    <div>
        <label for="7">Seven:</label>
        <input type="email" id="7" />
    </div>
</form>

<div class="text-area">
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
</div>

JS：

    function replaceText() {
        var thisvalue = $(this).val();
        var thisattr = $(this).siblings('label').attr('for');
        //alert(thisvalue);
        $('.text-area p').each(function(){
        $(this).text(function () {
        return $(this).text().replace("["+thisattr+"]", "["+thisvalue+"]"); 
            }); 
        });
    }

在小提琴中，单击文本＆＃34; asd＆＃34;，这将使您能够键入任何内容。您将看到，一旦您在＆＃34; One：＆＃34;旁边的输入标签中输入值，它就会根据需要替换文本。我现在能想到的是键入一个＆＃34;标签＆＃34;它包含在方括号之间，然后该函数将标签与输入的标签attr＆＃34;进行比较，用于＆＃34;并用输入值替换它。这有一个主要缺陷：用户每次想要更改值时都必须反复标记相同的输入，这会使表单无用，因为为什么他们不会直接输入信息而不是使用形式。

当我们在这里输入问题时，stackoverflow本身在文本框中创建链接标记，图像标记等的方式接近（如果不完全相同）。

Answer 1

您想要实现的功能类似于Angular JS，当您在文本框中键入时会发生实时更新。

如果没有，您可以使用 oninput 事件。您可以在“Asd”旁边放置span标记或占位符，只需用控件文本替换占位符innertext

将多个输入值附加到特定位置的div中

1 个答案: