如何禁用负整数并限制输入标签中的数量？

Question

您好，我是一名 Web 开发人员，在报价网站上工作。让我们通过我们的 CodePen 项目来理解我们的问题。一旦访问我的 CodePen 就可以理解这个问题。 https://codepen.io/Akash11166666/pen/JjRzqzp

正如您在代码中看到的那样，有一些引号和它们下方的复制按钮。现在只需在页面底部看到一个输入和一个转到按钮。这是一个页面元素的跳转，您可以通过它从一个页面跳转到另一个页面。

您可以在输入“第 1 页，共 4 页”上方看到一个跨度。无论如何，用户不能使用负整数而只能使用上面列出的那些数字。例如：如果有第 1 页，共 4 页，用户只能插入 1 到 4 之间的数字，如果插入的数字大于 4，则应将其替换为 4。

我尝试了很多方法来解决这个问题，但 none 对我有用。我是 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."
    },
    {
      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."
    },
    {
      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."
    },
    {
      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."
    },
]; 
}
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, 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, 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, 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>

Answer 1

您可以添加一个 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" />

如何禁用负整数并限制输入标签中的数量？

How to disable negative integer and limit the number in input tag?

html

javascript

scripting

pagination