提交用户输入点击和输入按键（HTML和JavaScript）

我完成了一个铬扩展，从文本框中获取用户输入，将其提供给JavaScript程序，然后转换它并返回一个新的输出（下面的HTML例子）。到目前为止，我已完成所有工作，并使用提交按钮提交用户输入的输入。提交用户输入点击和输入按键（HTML和JavaScript）

总之，我想让用户可以通过点击'提交'按钮或按回车键提交输入。我是新来的HTML和JavaScript，所以任何帮助表示赞赏。

JavaScript代码：

document.addEventListener("DOMContentLoaded", function(event) { 

document.getElementById('button').onclick = function() { 

console.log(document.querySelectorAll("textarea")) 
// grabs and converts user input to uppercase letters, stores in variable n_seq 
var n_seq = document.querySelectorAll("textarea")[0].value.toUpperCase(); 

// validate user input below 
// only letters are acceptable characters, spaces, special characters, and 
// numbers will throw an error 
if (!/^[A-Z]+$/i.test(n_seq)) { 
    alert("Invalid input!"); 
    return; 
} 

// if input is valid, program proceeds as normal 
else { 
    document.getElementById("amino_acid_seq").value = translateInput(codonDict, n_seq); 
    return; 
} 
} 

// function create second AA dictionary 
function makeCodonDict (aminoDict) { 
    let result = {} 
    for (let k of Object.keys(aminoDict)) 
    for (let a of aminoDict[k]) 
     result[a] = k 
    return result 
} 

// iterates through string of nucleotides, translates to AAs 
function translateInput (dict, str) { 
    let result = '' 
    for (let i = 0; i < str.length; i += 3) 
    result += dict[str.substr(i,3)] 
    return result 
} 

// dictionary of codon to amino acids 
const aminoDict={ 
    "A":["GCA","GCC","GCG","GCT"], 
    "C":["TGC","TGT"], 
    "D":["GAC", "GAT"], 
    "E":["GAA","GAG"], 
    "F":["TTC","TTT"], 
    "G":["GGA","GGC","GGG","GGT"], 
    "H":["CAC","CAT"], 
    "I":["ATA","ATC","ATT"], 
    "K":["AAA","AAG"], 
    "L":["CTA","CTC","CTG","CTT","TTA","TTG"], 
    "M":["ATG"], 
    "N":["AAC","AAT"], 
    "P":["CCA","CCC","CCG","CCT"], 
    "Q":["CAA","CAG","caa","cag"], 
    "R":["AGA","AGG","CGA","CGC","CGG","CGT"], 
    "S":["AGC","AGT","TCA","TCC","TCG","TCT"], 
    "T":["ACA","ACC","ACG","ACT"], 
    "V":["GTA","GTC","GTG","GTT"], 
    "W":["TGG"], 
    "Y":["TAC","TAT"], 
    "*":["TAA","TAG","TGA"], 
}; 

// creates codon dict from aa dict 
const codonDict = makeCodonDict(aminoDict) 

});

和HTML代码：

<!doctype html> 
 

 
<html> 
 

 
<head> 
 
<script type="text/javascript" src="popup.js"> 
 
</script> 
 
<link rel="stylesheet" href="popup.css"> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css" rel="stylesheet" integrity="sha384-HzUaiJdCTIY/RL2vDPRGdEQHHahjzwoJJzGUkYjHVzTwXFQ2QN/nVgX7tzoMW3Ov" crossorigin="anonymous"> 
 
</head> 
 
    <p> 
 
\t  <label for="input"><b>Input:</b><br></label> 
 
     <textarea class="test" id="nucleotide_seq" name="nucleotide_seq" rows="4" cols="25"></textarea> 
 
\t </p> 
 
<input type="submit" value="Submit" id="button" class="btn btn-default btn-xs"> 
 

 
    <p> 
 
     <label for="input"><b>Output:</b><br></label> 
 
     <textarea id="amino_acid_seq" name="amino_acid_seq" rows="4" cols="25"></textarea> 
 
    </p> 
 

 

 
</html>

来源

2017-05-08 Happy

一个keydown事件添加到元素并绑定到输入你点击使用相同的函数，在另一个函数内移动onclick代码;

document.querySelector('#amino_acid_seq').addEventListener("keydown", function (e) { 
    if (e.keyCode === 13) { //checks enter key 
     myAction(); 
    } 
}); 

document.getElementById('button').onclick = myAction; 

function myAction() { 
    console.log(document.querySelectorAll("textarea")) 
    var n_seq = document.querySelectorAll("textarea")[0].value; 

    document.getElementById("amino_acid_seq").value = translateInput(codonDict, n_seq); 
}

来源

2017-05-08 20:22:35 quirimmo

不幸的是，在打字输入后按下回车键只能将我带到下一行。 – Happy

你在这个脚本里面有你的代码吗？ '' – quirimmo

我已更新我的帖子以显示我的完整popup.js文件 – Happy

提交用户输入点击和输入按键（HTML和JavaScript）

回答

相关问题