Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Limit how many words can be entered into an input  (Read 2898 times)

  • Junior Member
  • *
  • Posts: 12
  • Karma: +0/-0
    • Free & Paid Classified Advertising
Limit how many words can be entered into an input
« on: 9 Dec 2020, 05:35:22 pm »
I'd like to use this little keyword function, the problem is I want to limit how many keywords can be entered. Adding maxlength="10" to the input doesn't do it. It limits how many characters can be entered, but not how many keywords.
Free & Paid Classified Advertising:


  • Sr. Member
  • ****
  • Posts: 355
  • Karma: +88/-0
  • I smile benignly
    • coothead's stuff ~ an eclectic collection
Re: Limit how many words can be entered into an input
« Reply #1 on: 9 Dec 2020, 09:14:46 pm »
Hi there,

my javascript skills are rather amateurish but
this example does limit the word count to a
defined value...

Code: [Select]
<html lang="en">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>word count</title>

The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.62em sans-serif;
#words {
width: 100%;
box-sizing: border-box;


<input id="words" type="text">

(function( d ) {
   'use strict';
   var ary = [], keypresses = 0, spacecount = 0, wordcount = 10,
       words = d.getElementById( 'words');
       words.addEventListener( 'keypress',
        function(e) {
           ary.push( e.code );
              if ( keypresses-1 !== -1  &&
                 e.code === 'Space' &&
                 ary[keypresses-1] !== 'Space' ) {
             spacecount ++;
              if ( spacecount >= wordcount ) {
             words.disabled = true;
          keypresses ++;
}( document ));


~ the original bald headed old fart ~

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 919
  • Karma: +171/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Limit how many words can be entered into an input
« Reply #2 on: 10 Dec 2020, 05:02:18 am »
Wrong forum area :P

Code: [Select]
<input type="text" pattern="^(\s*\b\S+\b\s*){0,10}$">

Note, if this is "keywords" as in the meta, you should limit to 8, not 10.

This is also a case where placeholder makes sense.

Code: [Select]
Restricted Input Test
placeholder="zero to eight single words"
title="This field should have zero to eight single words separated by spaces inside it."

fun tip, title is shown in the error popup.

This has not been JavaScript's job -- at least in modern browsers -- for about a decade.

That said, yeah... regex suck to work with.

-- edit -- oh and don't forget, you STILL have to check this server-side. Client side checks can NEVER be trusted. They are a convenience for the user, NOT actual validation.
« Last Edit: 10 Dec 2020, 05:20:48 am by Jason Knight »
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.


SMF spam blocked by CleanTalk