輸入值后如何清除輸入字段？
[英]How can I clear a input field after entering a value?
問題描述
我目前正在開發一個應用程序，該應用程序可以計算書籍數量，並將書籍編號從最低到最大。 我有一個用戶輸入框，我試圖找出在用戶輸入書號后如何清除它。我已經嘗試過$（'＃input'）。val（''）; 但是，這不允許我輸入兩位數字，例如“ 23”。
我的代碼：
// global variables var array = new Array(); $(document).ready(function() { // on enter submit values $(document).on('keypress', function(e) { if (e.which == 13) { // grabs user's input var $input = $('#input').val(); // stores in the array and sorts from lowest to highest array.push(parseInt($input)); array.sort(function(a, b) { return a - b }); // displays user's inputs $('#output').text(array.join(", ")); } // to prevent refresh on enter for forms $(function() { $("form").submit(function() { return false; }); }); // display values in js console console.log(array); // counter for number of books $('#numOfBooks').text(array.length); // clears input field // $('#input').prop("selected", false); }); // on click submit values $('#btn').on('click', function() { // grabs user's input var $input = $('#input').val(); // stores in the array and sorts from lowest to highest array.push(parseInt($input)); array.sort(function(a, b) { return a - b }); // displays user's inputs $('#output').text(array.join(", ")); // display values in js console console.log(array); // counter for number of books $('#numOfBooks').text(array.length); // clears input field // $('#input').prop("selected", false); }); // reset $("#resetButton").on("click", function() { setTimeout(function() { location.reload(); }, 300); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 id="header"> Sort Your Books </h1> <form id="wrapper"> <span> Enter Book Numbers: </span> <input type="text" id="input" placeholder="Enter a Number..."> <input type="button" id="btn" value="Enter"> </form> <div class="flex_NumOfBooks"> <h2 id="header_NumOfBooks"> Number of Books: </h2> <div id="numOfBooks"> </div> </div> <div id="wrapper1"> <h2 id="header-books"> Book Numbers: </h2> <div id="output"></div> </div> <button id="resetButton"> Reset </button>
1 個解決方案
解決方案1
0
請不要使用jq。 :)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>App</title> </head> <body> <div class="userGetBookID"> <div class="inputGroup"> <label>Input book id:</label> <input type="text" class="bookID" placeholder="eg esbn-123-abfgd"> <input type="button" class="addBookByID" value="add"> </div> </div> <div class="books"> <div class="listGroup"> <p class="books__list-header">list:</p> <div class="books__list"></div> </div> <div class="amountGroup"> <p class="books__amount-header"> amount: </p> <p class="books__amount"> 0 </p> </div> <button class="listReset"> reset </button> </div> <script> const userInput = document.querySelector('.bookID') const userList = document.querySelector('.books__list') const userSubmit = document.querySelector('.addBookByID') const userReset = document.querySelector('.listReset') const userListAmount = document.querySelector('.books__amount') const getUserInput = () => userInput.value const getUserList = () => userList.innerText.split(', ') const resetUserInput = () => userInput.value = "" const resetUserList = () => userList.innerText = "" const addToUserList = (value) => getUserList()[0] == "" ? userList.innerText += value : userList.innerText += (', ' + value) const getUserListLength = () => getUserList()[0] == "" ? 0 : getUserList().length const updateUserListAmount = () => userListAmount.innerText = getUserListLength() userSubmit.addEventListener('click', (event) => { addToUserList(getUserInput()) resetUserInput() updateUserListAmount() event.preventDefault() }) userReset.addEventListener('click', (event) => { resetUserList() updateUserListAmount() }) </script> </body> </html>
如何設置輸入字段的大小，以便在輸入中輸入4個單詞后跳轉到下一個字段？
[英]How do I set input field size so that after entering 4 words in input it jumps to the next field?
如何獲取在選擇2輸入字段上輸入的當前輸入值
[英]How to get the current input value which is entering on select 2 input field
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.