如何读取 p 标签中 input 标签中的文本？

Question

HTML:

<div class="container">
<p class="section-description" id="txt">Today I went to the zoo. I saw a(n) <input placeholder="noun"> <input placeholder="adjective"> jumping up and down in its tree. He <input placeholder="verb, past tense"> <input placeholder="adverb"> through the large tunnel that led to its <input placeholder="adjective"> <input placeholder="noun">. I got some peanuts and passed them through the cage to a gigantic gray <input placeholder="noun"> towering above my head. Feeding that animal made me. </p>
</div>

JS:

let synth = window.speechSynthesis;

let inputTxt = document.getElementById('txt');

function speak() {
if (synth.speaking) {
    console.error('speechSynthesis.speaking');
    return;
}
    let utterThis = new SpeechSynthesisUtterance(inputTxt.innerHTML);

    let selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
    for (i = 0; i < voices.length; i++) {
        if (voices[i].name === selectedOption) {
            utterThis.voice = voices[i];
        }
    }
    synth.speak(utterThis);
}

当我在输入框中输入一些文本时，代码仍然显示 "placeholder..."，如何让代码读出输入的文本？

Answer 1

您正在抓取 innerHTML，它不会显示为 text，它将显示为 html。

为了连接您的 input 元素和您的 text，您实际上需要在代码中的某处将两者结合起来。可能在 speak 函数内。

执行此操作的最简单方法可能如下所示：

let compiledStr = "";
inputTxt.childNodes.forEach(i =>
compiledStr += (i.nodeType === 3) ? 
  i.textContent : 
  i.value);

上面所做的是遍历 inputTxt 元素的子节点。它获取任何 text nodes 的 textContent（纯文本）或任何 element nodes 的 value 并按顺序将它们拼接在一起。

一个简单的例子来看看这是如何工作的 一定要点击输入句子下面的"compile"按钮

let synth = window.speechSynthesis;
let inputTxt = document.getElementById('txt');

document.querySelector("button").addEventListener("click", function() {
  let compiledStr = "";
  inputTxt.childNodes.forEach(i => compiledStr += (i.nodeType === 3) ? i.textContent : i.value);

  console.log(compiledStr);
});

<div class="container">
  <p class="section-description" id="txt">Today I went to the zoo. I saw a(n) <input placeholder="noun" id="noun1"> <input placeholder="adjective" id="adjective1"> jumping up and down in its tree. He <input placeholder="verb, past tense" id="verb1"> <input placeholder="adverb" id="adverb1">    through the large tunnel that led to its <input placeholder="adjective" id="adjective2"> <input placeholder="noun" id="noun2">. I got some peanuts and passed them through the cage to a gigantic gray <input placeholder="noun" id="noun3"> towering above my head. Feeding that animal made me. </p>
</div>
<hr>
<button>Click Me to Compile</button>

使用您当前的代码，以下应该对您有用：

let synth = window.speechSynthesis;
let inputTxt = document.getElementById('txt');


function speak() {
let inputTxt = document.getElementById('txt');

let compiledStr = "";
inputTxt.childNodes.forEach(i => compiledStr += (i.nodeType === 3) ? i.textContent : i.value);

if (synth.speaking) {
    console.error('speechSynthesis.speaking');
    return;
}
    let utterThis = new SpeechSynthesisUtterance(compiledStr);

    let selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
    for (i = 0; i < voices.length; i++) {
        if (voices[i].name === selectedOption) {
            utterThis.voice = voices[i];
        }
    }
    synth.speak(utterThis);
}

<div class="container">
<p class="section-description" id="txt">Today I went to the zoo. I saw a(n) <input placeholder="noun" id="noun1"> <input placeholder="adjective" id="adjective1"> jumping up and down in its tree. He <input placeholder="verb, past tense" id="verb1"> <input placeholder="adverb" id="adverb1"> through the large tunnel that led to its <input placeholder="adjective" id="adjective2"> <input placeholder="noun" id="noun2">. I got some peanuts and passed them through the cage to a gigantic gray <input placeholder="noun" id="noun3"> towering above my head. Feeding that animal made me. </p>
</div>

如何读取 p 标签中 input 标签中的文本？

How to read the text in a input tag in a p tag?

html

javascript

speech-synthesis