點擊並通過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