点击并通过Enter键提交用户输入（HTML和JavaScript）

Question

我正在完成一个chrome扩展程序，该扩展程序从文本框中获取用户输入，将其输入到JavaScript程序，然后将其转换并返回新的输出（下面的HTML示例）。 到目前为止，我一切正常，并且正在使用“提交”按钮提交用户键入的输入。

简而言之，我想这样做，以便用户可以通过单击“提交”按钮或按Enter键来提交输入。 我是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> <label for="input"><b>Input:</b><br></label> <textarea class="test" id="nucleotide_seq" name="nucleotide_seq" rows="4" cols="25"></textarea> </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>

Answer 1

在元素上添加一个keydown事件，并绑定到与您单击时使用的函数相同的Enter键，将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); 
}

点击并通过Enter键提交用户输入（HTML和JavaScript）

问题描述

1 个解决方案

解决方案1
0 2017-05-08 20:22:35

点击并通过Enter键提交用户输入（HTML和JavaScript）

问题描述

1 个解决方案

解决方案1 0 2017-05-08 20:22:35

解决方案1
0 2017-05-08 20:22:35