Question

尝试制作一个网页，该网页将获取用户输入的每个字母并将其输出为语音字母。例如（用户类型：Hello）（输出：Hotel，Echo，Lima，Lima，Oscar）。到目前为止，这就是我所需要的关于如何获取每个字母的值并将其与数组进行比较以获取输出的指南。

//define UI variables
const userInput = document.querySelector('#input');
const phoneticAlphabet = ["Alpha"," Bravo","Charlie"];

//load all event listeners
loadEventListeners();

function loadEventListeners() {
  //add submit event 
  form.addEventListener('submit', submitInput);
}

//submit user input
function submitInput(e) {

  console.log(userInput.value);
  if (userInput.value === '') {
    alert('Add Input');
  } 
  e.preventDefault();
}

Answer 1

您可以在字段key的事件上使用keydown属性来获取被按下的字符。

然后使用key.length === 1（see this answer）检查该密钥是否为可打印密钥。

如果键是可打印的，则将其转换为大写字母，然后使用String.prototype.charCodeAt()转换为其字符代码，然后从中减去65（字符A）。这将为您提供数组中的索引。

如果此索引在数组的范围内，请访问数组并打印字符。

const phoneticAlphabet = ['Alpha','Bravo','Charlie','Delta','Echo','Foxtrot','Golf','Hotel','India','Juliet','Kilo','Lima','Mike','November','Oscar','Papa','Quebec','Romeo','Sierra','Tango','Uniform','Victor','Whiskey','X-ray','Yankee','Zulu'];

document.querySelector('#input').addEventListener('keydown', e => {
  const isPrintable = e.key.length === 1;
  console.clear();
  if (isPrintable) {
    const idx = e.key.toUpperCase().charCodeAt(0) - 65;
    if (idx >= 0 && idx < phoneticAlphabet.length) {
      const phoneme = phoneticAlphabet[idx];
      console.log(phoneme);
    }
  }
});

<input type="text" id="input">

Answer 2

我假设您想替换输入中不可转换的字符。同样，我使用正则表达式。我还在“ p”标签中添加了响应。然后单击“提交”即可运行代码。

更新：将我的数组扩展为所有字母：）

更新2： 感谢@CharlieBatista指出。现在，输入也接受大写字符。

//define UI variables
const form = document.phoneticForm;
const userInput = document.querySelector('#input');
const output = document.querySelector('#output');
const phoneticAlphabet = ['Alpha','Bravo','Charlie','Delta','Echo','Foxtrot','Golf','Hotel','India','Juliet','Kilo','Lima','Mike','November','Oscar','Papa','Quebec','Romeo','Sierra','Tango','Uniform','Victor','Whiskey','X-ray','Yankee','Zulu'];

//load all event listeners
loadEventListeners();

function loadEventListeners() {

  //add submit event 
  form.addEventListener('submit', submitInput);

}

//submit user input
function submitInput(e) {

  e.preventDefault();
  var value = userInput.value;
  
  if (value === '') {
      alert('Add Input');
  } else {
  	value = value.replace(/[^a-zA-Z]/gi,'');
    userInput.value = value;
    value = value.toLowerCase();
    var outputArr = [];
    for(var i = 0; i < value.length; i++){
    	outputArr.push(phoneticAlphabet[value.charCodeAt(i)-97]);
    }
    
    output.innerHTML = outputArr.join(', ');
  }

}

<form name="phoneticForm">
  <input type="text" id="input">
  <input type="submit">
</form>

<p id="output"></p>

使用querySelector获取用户输入的每个字母

2 个答案: