在div的特定位置追加多个输入值

Question

目标:使用户能够将表单字段链接到不同div内容中的特定位置，然后分别将各个输入字段的文本附加到这些特定位置。

小提琴来了

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+"]"); 
            }); 
        });
    }

在页面中，点击文本"asd"，这样你就可以输入任何东西。您将看到，一旦在"One:"旁边的输入标记中输入一个值，它就会根据需要替换文本。到目前为止，我能想到的是，在方括号中输入一个"标签"，然后函数将标签与输入的标签attr"for"进行比较，并将其替换为输入值。这样做有一个主要缺陷:用户每次想要更改值时都必须一次又一次地标记相同的输入，这使得表单毫无用处，因为为什么他们不直接输入信息而不是使用表单呢?

这与我们在这里输入问题时，stackoverflow本身在文本框中创建链接标签，图像标签等的方式非常接近，如果不是完全相同的话。

Answer 1

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

如果没有，可以使用oninput事件。你可以在你的"Asd"旁边放一个span标签或者一个占位符然后用控件