Member Avatar for sanjay@srvmedia

how to set char limit in prompt box using javascript?

Edited by Member #120589 because: wrong forum
  • 3 Contributors
  • 5 Replies
  • 965 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Native browser prompt dialogs are implemented by the browser and cannot be limited, styled or extended. and are correct: to enforce a character limit use a custom input inside a modal (native <dialog> or a UI library like jQuery UI / Bootstrap) rather than window.prompt(). A quick-but-ugly fallback is to call prompt(), then validate the returned string and re-prompt or show an error; better UX comes from a small custom dialog with a live counter and client-side enforcement.

A minimal approach: create an overlay/modal element, place an input or textarea inside it, enforce the length on the input event (also trim any pasted text), and return the value via a callback or Promise. Keep three behaviors in mind: treat a cancel as null (same as prompt), trim leading/trailing whitespace if needed, and provide a visible remaining-character counter. Remember accessibility: focus the input when the dialog opens, restore focus on close, and include appropriate ARIA roles or use a tested library.

Example (compact helper that creates a simple modal and enforces a max length):

async function limitedPrompt(message, max) {
  return new Promise(resolve => {
    const overlay = document.createElement('div');
    overlay.style = 'position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;';
    const box = document.createElement('div');
    box.style = 'background:#fff;padding:12px;border-radius:4px;max-width:90%;';
    box.innerHTML = '<div>'+message+'</div>';
    const input = document.createElement('input');
    const counter = document.createElement('div');
    const ok = document.createElement('button');
    ok.textContent = 'OK';
    const cancel = document.createElement('button');
    cancel.textContent = 'Cancel';

    input.type = 'text';
    counter.textContent = max + ' characters remaining';
    input.addEventListener('input', () => {
      if (input.value.length > max) input.value = input.value.slice(0, max);
      counter.textContent = (max - input.value.length) + ' characters remaining';
    });

    ok.addEventListener('click', () => { overlay.remove(); resolve(input.value); });
    cancel.addEventListener('click', () => { overlay.remove(); resolve(null); });

    box.appendChild(input);
    box.appendChild(counter);
    box.appendChild(ok);
    box.appendChild(cancel);
    overlay.appendChild(box);
    document.body.appendChild(overlay);
    input.focus();
  });
}

Notes: use a library (jQuery UI, Bootstrap) or the <dialog> element for production, add keyboard handling and focus trap for accessibility, and handle old browsers with a polyfill when needed.

Recommended Answers

All 5 Replies

Member Avatar for Szabi Zsoldos

What do you mean by this, in more details?

Member Avatar for Member #120589

If you're talking about a js popup, then I don't think it's possible. However modal dialogs like jQueryUI popups, which may serve a similar purpose for you can be controlled as you can use a <input maxlength="20" ... />

BTW - if you want further info, post to the js forum, not php.

Edited by Member #120589
Member Avatar for sanjay@srvmedia

I have called following javascript function onclick

<script type="text/javascript">
        function getValue(){
           var retVal = prompt("Why you want to apply this job? : ", "write here");
           alert("You have entered : " +  retVal );
        }
    </script>

now how to set char limit in prompt box?

Member Avatar for Szabi Zsoldos

This cannot be done with the prompt() function, you shoul look towards the jQueryUI or something like that.

Member Avatar for Member #120589

Ok moving...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.