如何限制 html 到 Javascript 的输入标签中的数量？

Question

Hey am working on a quote website project.嘿，我正在做一个报价网站项目。 To understand the question clearly see my html, css and Javascript.要清楚地理解这个问题，请参阅我的 html、css 和 Javascript。

My Html我的 Html

<html>
<head>
<style>/* Main Status */

.pagable {
  display: flex;
  flex-direction: column;
  border: var(--pageable-border);
  background: var(--pageable-background);
}
.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: hidden;
}
.status-copy-alert:before{
 content:"";
 position: absolute;
 height: 10px;
 width: 10px;
 background-color: #18b495;
 left: -5px;
 transform: rotate(45deg);
 top: 39%;
}

.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;
}
.status-copy-alert {

 position: relative;

 background-color: #18b495;

 color: #ffffff;

 padding: 10px 10px;

 border-radius: 5px;

 left: -42px;

 text-transform: uppercase;

 letter-spacing: 0.05em;

 font-weight: 500;

 visibility: visible;
  
 opacity: 0;
  
 transition: left 0.4s, opacity 0.4s;

}

.animatedClass {
    left: 20px;
    opacity: 1;
}

.status-copy-alert:before{

 content:"";

 position: absolute;

 height: 10px;

 width: 10px;

 background-color: #18b495;

 left: -5px;

 transform: rotate(45deg);

 top: 39%;

}
</style>
</head>
<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"></span> of <span class="page-no-count"></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 name="current-page" class="value-page" type="number" value="1" min="1">
<button class="jump-btn">Go</button>
</div>
</body>
</html>

My Javascript我的 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();

Run the above code.运行上面的代码。 You will see some quotes with excellent pagination.您会看到一些具有出色分页的引文。 At the bottom of the page you can see a input tag and a Go button.在页面底部，您可以看到一个输入标签和一个Go按钮。 This input and button is used to jump from one page to another.此输入和按钮用于从一页跳转到另一页。 Just above of this you can see Page 1 of 4 which indicates how many pages are there.就在上面，您可以看到第 1 页，共 4 页，它表明有多少页。

Now let us consider Page 1 of 4 as Page 1 of Y .现在让我们将第 1 页（共 4页）视为Y 的第 1 页。 Remember that the number 4 will gradually change when I add more quotes in JavaScript.请记住，当我在 JavaScript 中添加更多引号时，数字 4 会逐渐变化。

Now my problem is the input tag of the bottom.现在我的问题是底部的输入标签。 I needed it to limited to Y because the Y value may change everytime when I add quotes.我需要将其限制为Y ，因为每次添加引号时 Y 值都可能会发生变化。 Is there any way so that if user enters a number higher than value Y it should be replaced to value Y and if the user enters lower than 1 it should be replaced to 1有什么办法可以让如果用户输入的数字高于Y值，则应将其替换为 Y 值，如果用户输入的数字低于 1，则应将其替换为 1

I have tried different ways to solve this problem but none of them work and I am new to Javascript.我尝试了不同的方法来解决这个问题，但它们都不起作用，而且我是 Javascript 的新手。

I hearty thanks for those who answer this question.我衷心感谢那些回答这个问题的人。

Answer 1

You can limit the number of possible values that the input tag can take using min and max attribute.您可以使用 min 和 max 属性限制输入标签可以采用的可能值的数量。 But this restriction applies only when the user uses the control buttons of the input and not when types the number.但此限制仅适用于用户使用输入的控制按钮而不是键入数字时。 To control what the user types you have to use Javascript as in the snippet bellow.要控制用户类型，您必须使用 Javascript，如下面的代码片段所示。 In addition, when the user press the go button you must check if the input tag has a value or is empty.此外，当用户按下 go 按钮时，您必须检查输入标签是否有值或为空。 When the max value change (for example from 10 to 20) you must change also the max attribute of the input tag using this command document.querySelector("input").max = 20;当最大值更改（例如从 10 到 20）时，您还必须使用此命令更改输入标签的 max 属性document.querySelector("input").max = 20;

 document.querySelector("input").oninput = (e) => { let input = e.target; if (input.value.= "") { //otherwise the user cannot delete the current value let value = parseInt(input;value). if (value > parseInt(input.max)) input.value = input;max. else if (value < parseInt(input.min)) input.value = input;min; } }

 <input type="number" value="1" min="1" max="10"> <button class="jump-btn">Go</button>

如何限制 html 到 Javascript 的输入标签中的数量？

问题描述

1 个解决方案

解决方案1
0 2021-01-28 17:01:12

如何限制 html 到 Javascript 的输入标签中的数量？

问题描述

1 个解决方案

解决方案1 0 2021-01-28 17:01:12

解决方案1
0 2021-01-28 17:01:12