Как очистить поле ввода после ввода значения?
В настоящее время я работаю над приложением, которое подсчитывает количество книг, а также помещает номера книг от наименьшего к наибольшему. У меня есть поле ввода пользователя, и я пытаюсь понять, как его очистить после того, как пользователь введет номер книги. Я пробовал $ ('# 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.info(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.info(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> Вы не должны связывать обработчик событий внутри другого обработчика событий.
По сути, пользователь вводит числа, и я хотел бы, чтобы он очищался каждый раз, когда пользователь нажимал «ввод» или нажимал кнопку. Я обнаружил, что $ ('# input'). Val (''); делает именно то, что хочу; однако он не позволяет мне вводить двухзначные числа, такие как «23». Мне было интересно, есть ли другой способ. Надеюсь, это проясняет ситуацию!
Я не вижу этого в коде вопроса. Опубликуйте код, в котором возникла проблема.
Я также не понимаю, почему у вас есть вызов document.ready, что совершенно нормально, а затем внутри него есть сокращенный вызов $(function() {}). Код, с помощью которого вы пытались очистить значение, полностью действителен и не влияет на количество символов. Но я думаю, что у вас здесь гораздо более серьезные проблемы.
Куда ты id ставил $("#input").val('')? Он должен находиться внутри if (e.which == 13), чтобы он запускался только тогда, когда пользователь заканчивает ввод значения.
@DrewKennedy Спасибо за советы! Насчет $(function() {}) вы совершенно правы. Проблема, с которой я столкнулся, заключается в том, что $('#input').val(' '); очищает мои предыдущие записи; однако он не допускает значения больше 9. Так, например, как 10.
@Barmar Это устранило мою проблему! Огромное спасибо! Это так логично, почему я поставил это там! <3 <3
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
пожалуйста, не используйте 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 = "e.g. 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>
Я не понимаю вопроса. Какое отношение имеет очистка ввода после того, как вы ввели его, к количеству цифр, которые вы можете ввести?