如何解决如何禁用负整数并限制输入标签中的数字?
您好,我是一名网络开发人员,正在一家报价网站上工作。让我们通过 CodePen 项目了解我们的问题。访问我的 CodePen 以了解问题。 https://codepen.io/Akash11166666/pen/JjRzqzp
正如您在代码中看到的,它们下面有一些引号和一个复制按钮。现在只看到在页面底部,您可以看到一个输入和一个运行按钮。这是一个跳转到页面元素,您可以通过它从一个页面跳转到另一个页面。
您可以在输入的正上方看到一个跨度,上面写着“第 1 页,共 4 页”。无论如何,用户不能使用负整数而只能使用上面列出的那些数字。例如:如果有第 1 页,共 4 页,则用户只能插入 1 到 4 之间的数字,如果插入的数字大于 4,则应替换为 4。
我尝试了很多方法来解决这个问题,但没有一个对我有用。我是 Javascript 新手,对此不确定。
非常感谢回答这个问题的人。
参考我的 CodePen 项目 我的 JavaScript
const resultEl = document.querySelector('.allquotes');
const pageCurr = document.querySelector('.manho')
const pageNoCurr = document.querySelector('.page-no-curr');
const pageNoCount = document.querySelector('.page-no-count')
const btnPrev = document.querySelector('.page-btn-prev');
const btnNext = document.querySelector('.page-btn-next');
let results = [];
const getResultCount = () => results.length;
const getPageSize = () => 12;
const getCurrPage = () => +pageCurr.innerText;
const getPageCount = () => Math.ceil(getResultCount() / getPageSize());
const pageResponse = (records,pageSize,page) =>
(start => records.slice(start,Math.min(records.length,start + pageSize)))
(pageSize * (page - 1));
const btnJump = document.querySelector('.jump-btn');
const pageValue = document.querySelector('.value-page');
const main = async() => {
btnPrev.addEventListener('click',navPrev);
btnNext.addEventListener('click',navNext);
btnJump.addEventListener('click',navJump);
results = await retrieveAllQuotes();
updatePager(results);
redraw();
};
const redraw = () => {
resultEl.innerHTML = '';
const paged = pageResponse(results,getPageSize(),getCurrPage());
const contents = document.createElement('div');
contents.classList.add("allStatus");
const quotes = paged.map((record) => `<div class='latestatus'><p class='copytxt'>${record.quotes}</p><div> <button class="copystatus btn">copy</button><span class="status-copy-alert hidden" id="status-copy-alert">copied!</span></div></div>`);
const quoteGroupNumer = Math.ceil(quotes.length / 2);
const groups = Array(quoteGroupNumer).fill('').map((value,index) => {
const groupQuoteFirst = quotes[2 * index]; // 0,2,4,6
const groupQuoteSecond = quotes[2 * index + 1] || ''; // 1,3,5,7
return `<div class="flex">${groupQuoteFirst}${groupQuoteSecond}</div>`;
});
contents.innerHTML = groups.join('');
resultEl.append(contents);
};
const navPrev = (e) => {
const pages = getPageCount();
const curr = getCurrPage();
const prevPage = curr > 1 ? curr - 1 : curr;
pageCurr.innerText = prevPage;
pageNoCurr.textContent = prevPage;
redraw();
}
const navNext = (e) => {
const pages = getPageCount();
const curr = getCurrPage();
const nextPage = curr < pages ? curr + 1 : curr;
pageCurr.innerText = nextPage;
pageNoCurr.textContent = nextPage;
redraw();
}
const navJump = (e) => {
const pages = getPageCount();
const curr = getCurrPage();
pageCurr.innerText = pageValue.value;
pageNoCurr.textContent = pageValue.value;
redraw();
}
const updatePager = () => {
const count = getPageCount();
const curr = getCurrPage();
pageCurr.innerText = curr > count ? 1 : curr;
pageNoCurr.textContent = curr > count ? 1 : curr;
pageNoCount.textContent = count;
};
const retrieveAllQuotes = async function() {
return[{
quotes: "1The cat is better than dog."
},{
quotes: "2Google is a open source library."
},{
quotes: "3Cats are better than ferrets."
},{
quotes: "4love books."
},{
quotes: "5Life is short make it possible."
},{
quotes: "6The cat is better than dog"
},{
quotes: "7Google is a open source library."
},{
quotes: "8Cats are better than ferrets."
},{
quotes: "9love books."
},{
quotes: "10Life is short make it possible."
},{
quotes: "1The cat is better than dog."
},];
}
document.querySelector('.allquotes').addEventListener(
'click',function (e) {
e.preventDefault();
if (e.target && e.target.matches('.copystatus')) {
const quote = e.target.parentNode.closest('.latestatus')
.childNodes[0].textContent;
const notify = e.target.nextSibling.closest('.status-copy-alert');
notify.classList.add('animatedClass')
setTimeout(() => {
notify.classList.remove('animatedClass')
},1000);
const textArea = document.createElement('textarea');
textArea.value = quote;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
textArea.remove();
}
},false
);
main();
我的 CSS
/* Main Status */
.hidden {
display:none;
}
.mainStatus{
background-color: #fff;
border-radius: 10px;
Box-shadow: 0 3px 10px rgba(0,0.2);
padding-bottom: 5px;
margin: 10px;
margin-top: 10px;
max-width: 95%;
width: 95%;
height: auto;
border-radius: 20px;
Box-shadow: 0 3px 10px rgba(0,0.2);
}
.statusheading{
text-align: center;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px 10px 10px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
font-weight: 300;
font-size: 20px;
}
.latestatus{
display: grid;
height: auto;
Box-shadow: 0 3px 10px rgba(0,0.2);
padding: 10px 20px 10px 20px;
border-radius: 30px;
margin: 10px 10px 10px 10px;
width: 445px;
min-height: 130px;
font-size: 15px;
}
.allStatus{
display: block;
}
.latestatus p{
width: auto;
position: relative;
}
.copystatus{
font-weight: 500;
text-transform: uppercase;
width: 100px;
height: 40px;
}
.pagable {
display: flex;
flex-direction: column;
border: var(--pageable-border);
background: var(--pageable-background);
}
.pagable .pagable-results {
display: flex;
flex-direction: column;
flex: 1;
padding: 0.25em;
}
.pagable .pagable-status {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0.25em;
background: var(--pageable-status-background);
}
.pagable .pagable-actions {
display: grid;
grid-auto-flow: column;
grid-gap: 0.25em;
}
.pagable .pagable-actions input[name="page-curr"] {
width: 3em;
}
.btn {
display: inline-block;
padding: 10px 20px;
cursor: pointer;
background: #18b495;
color: #fff;
border: none;
border-radius: 30px;
}
.btn:hover {
transform: scale(0.98);
}
.status-copy-alert {
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
left: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
visibility: visible;
}
.status-copy-alert:before{
content:"";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
transform: rotate(45deg);
top: 39%;
}
我的HTML
<html>
<body>
<a href="hindinj.html">caeman</a>
<div class="mainStatus">
<h2 class="statusheading">Latest English Status</h2>
<div class="allquotes"></div>
<div class="pagable-status">
<label>Page <span class="page-no-curr">1</span> of <span class="page-no-count">1</span></label>
<div class="pagination">
<button class="page-btn-prev btn">PRE</button>
<span class="manho">1</span>
<button class="page-btn-next btn">NEXT</button>
</div>
<input class="value-page" type="number" value="1" min="1">
<button class="jump-btn">Go</button>
</div>
</body>
</html>
解决方法
您可以添加一个 input
侦听器并将值限制在您想要的范围内:
const input = document.querySelector('input');
const MAX = 4;
input.addEventListener('input',function() {
this.value = Math.min(Math.max(parseInt(this.value),1),MAX);
});
input {
width: 120px;
}
<span>Page:</span>
<input type="number" />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。