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

Question

I'm finishing up a chrome extension that gets user input from a text box, feeds it to a JavaScript program, then converts it and returns a new output (HTML example below). 我正在完成一个chrome扩展程序，该扩展程序从文本框中获取用户输入，将其输入到JavaScript程序，然后将其转换并返回新的输出（下面的HTML示例）。 So far I have everything working perfectly and am using a submit button to submit the input the user typed. 到目前为止，我一切正常，并且正在使用“提交”按钮提交用户键入的输入。

In short I'd like to make it so that a user can submit the input either by clicking the 'Submit' button or by pressing the enter key. 简而言之，我想这样做，以便用户可以通过单击“提交”按钮或按Enter键来提交输入。 I'm new to HTML and JavaScript so any help is appreciated. 我是HTML和JavaScript的新手，因此可以提供任何帮助。

JavaScript code: 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)

});

And HTML code: 和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

Add a keydown event to the element and bind to the enter the same function you use on click, moving the onclick code inside another function; 在元素上添加一个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