Question

我一直试图用文本字段的输入替换标题的一部分。当用户输入邮政编码时，该文本将显示为“重大新闻！我们在12345中有位置”。

<h4>GREAT NEWS! WE HAVE A LOCATION IN YOUR AREA. <span id="zipPrint"></span></h4>


function myFunction() {
   var x = document.getElementById("zipNumber");
    var text = " ";
    var i;
    for (i = 0; i < x.length ;i++) {
        $('#hide-me').hide();
        text += .replace("YOUR AREA", x.elements[i].value);
    }
    document.getElementById("zipPrint").innerHTML = text;
}

Answer 1

text +=行对我来说似乎是错误的。我想您需要这个。

var text = "GREAT NEWS! WE HAVE A LOCATION IN YOUR AREA.";
text = text.replace("YOUR AREA", x.elements[i].value);

这样，"YOUR AREA"被替换为位置号，并且结果被分配给变量text。

Answer 2

您可以使用自己设置的跨度。无需使用替换。在这里，我在输入上添加了一个事件侦听器（可以根据需要进行更改），当您单击输入时，它将替换文本中的跨度。

document.getElementById("zipNumber").addEventListener("change",myFunction);

function myFunction() {
    let zip = this.value;
    // do some zip validation if needed
    document.getElementById("zipPrint").innerHTML = zip;
}

<h4>GREAT NEWS! WE HAVE A LOCATION IN <span id="zipPrint">YOUR AREA</span></h4>

<input id="zipNumber"/>

Answer 3

为了使我们更容易地操作DOM，下面是h4标签的样子：

<h4>GREAT NEWS! WE HAVE A LOCATION IN <span id="zipPrint">YOUR AREA.</span></h4>

现在，将显示邮政编码的span标签包含文本“您的区域”。将会替换为邮政编码。

var zipNum = document.getElementById("zipNumber"), zipPr = document.getElementById("zipPrint");
zipNum.addEventListener('blur', function myFunction() {
   var zc = this.value.trim();
   zipPr.textContent = (zc.length && !isNaN(zc)) ? zc:'YOUR AREA.';
});

<h4>GREAT NEWS! WE HAVE A LOCATION IN <span id="zipPrint">YOUR AREA.</span></h4>
<input id="zipNumber"/>

说明：

blur事件侦听器通过input附加到id="zipNumber"标记，该事件侦听器处理在h4标记中写入邮政编码的过程。

处理事件的匿名函数将检查input中是否包含有效数字：如果是，则将input的值放在span标记中，否则，如果input的值为空或不表示有效数字，则将字符串"YOUR AREA."放在span标记中。

希望我进一步推动了你。

用输入val JS替换部分html文本

3 个答案: