CUTCODEDOWN
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 1321 times)

qwikad.com

  • 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.

http://jsfiddle.net/bjBQZ/50/
Free & Paid Classified Advertising: https://QwikAd.com

coothead

  • Full Member
  • ***
  • Posts: 126
  • Karma: +19/-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 qwikad.com,

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

Code: [Select]
<!DOCTYPE HTML>
<html lang="en">
<head>

<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;
}
   
</style>

</head>
<body>

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

<script>
(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 ));
</script>

</body>
</html>


coothead
~ the original bald headed old fart ~

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 650
  • Karma: +116/-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]
<form>
<label>
Restricted Input Test
<input
type="text"
pattern="^(\s*\b\S+\b\s*){0,8}$"
placeholder="zero to eight single words"
title="This field should have zero to eight single words separated by spaces inside it."
size="30"
>
</label>
<button>test</button>
</form>

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 »
Sorrow hides well in your shell. A fellow man with hurt to spare.
Dear one, here I am to share the fear. An act of kindness, without an amen.
Come in, the fire's warm. Burn the rope and dance some more.

 

SMF spam blocked by CleanTalk

Advertisement