Jump to content

Recommended Posts

I'm looking for a way to show the WORD COUNT, rather than character count, in a text area. I found a script to do it, but it was not Caspio-specific and involved creating another text area. I'm hoping to find a way to do this within Caspio. Any ideas?

Share this post


Link to post
Share on other sites

Try this.

In your form add an HTML Block immediately under the textarea field.

In the HTML block add this code below. Change the name of  "InsertRecordmessage"  to the unique name of your textarea field. Get that name by viewing page source while previewing the form.

Here's the code:

<!-- area counter text appears -->
<div id="writing" style="width:90%; text-align:center; margin:0 auto 15px auto; font-size:11px; font-family:sans-serif; color:#000; padding:0 5%">
Total Word Count: <span id="cnt" style="color:red;">0</span>
</div>

<!-- script to capture keypress within the textarea field - change name of "InsertRecordmessage" if need be -->

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {

document.getElementsByName("InsertRecordmessage")[0].addEventListener("keypress", myFunction);

function myFunction() {
var string = document.getElementsByName("InsertRecordmessage")[0].value;
var wordcount = string.split(/[^\s]+/).length - 1;

document.getElementById("cnt").innerHTML = wordcount;
}
 
});

</script>

Good luck, LMK how it goes.

 

Geoff

Share this post


Link to post
Share on other sites

Thank you! This worked on the first field, but when I added an HTML block to count the words in a second field (and updated the field name), it's not working for the second field. The first one still works. Is there a trick to getting it to work twice? Thanks again!

Amanda

Share this post


Link to post
Share on other sites

• Use the same code, but change where it says "myFunction"  to another name .. like "myFunctionB" or similar.  Make sure to change all occurrences of it.

• Also change the ID of the <span> tag to "cntB" and then change that in the script code too, so your counter text goes to the right area.

• Finally - also change the target text area name, as you did earlier, to match what new text area field your targeting... Make sure and change all occurrences of it.

 

LMK if this works.

Share this post


Link to post
Share on other sites

Hi, I used the code provided above and it is working when I have a text area field. But when I enabled the rich text editor, the code is not working anymore. I tried getting the class and id of the rich text editor but still not working. What class or ID should I get for this code to work on me? Can you help? 

Thanks.

Share this post


Link to post
Share on other sites

Hi @Batchini,

I have came up with another solution which can achieve this workflow.
First Add a Virtual Field then call the Text Area which rich text editor is enabled in the Virtual field. Here's a sample screenshot for reference: 3992406
You can Hide the Virtual field. Please refer to this screenshot on how to do so: 3992421
Lastly, add a Header and Footer. On the Footer paste this code:

<div id="writing" style="width:90%; text-align:center; margin:0 auto 15px auto; font-size:11px; font-family:sans-serif; color:#000; padding:0 5%">
Total Word Count: <span id="cnt" style="color:red;">0</span>
</div>
<script type="text/javascript">
document.getElementsByName("cbParamVirtual1")[0].onchange=function() {
var string = document.getElementsByName("cbParamVirtual1")[0].value;
var wordcount = string.split(/[^\s]+/).length - 1;
document.getElementById("cnt").innerHTML = wordcount;
};
</script>

'cbParamVirtual1' should be changed based on what virtual field you're using.

I hope this works.

Thanks,
Barbie

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...