CMS Development

LDouglas8
メンバー

Add a counter to a text widget

Screenshot from 2023-01-09 11-19-28.png

I have a text widget and I'd like to add a counter that updates in real time with the number of characters typed. This is a widget by Hubspot.

{{ module.text_field }}

 Is there a way of doing this? 

0 いいね!
5件の返信
Jaycee_Lewis
コミュニティーマネージャー
コミュニティーマネージャー

Add a counter to a text widget

Hi, @LDouglas8 👋 Thanks for reaching out! I wonder if we can accomplish this using some JavaScript? Hey, @MatthiasWeber @Oezcan, do you have any experience here? 

 

Best,

Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 いいね!
MatthiasWeber
ガイド役 | Solutions Partner
ガイド役 | Solutions Partner

Add a counter to a text widget

Hi  ,Hi  , 

with the magic of JavaScript everything is possible 🪄

 

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
    var cs = $(this).val().length;
    $('#characters').text(cs);
}

 

source: https://stackoverflow.com/questions/9767521/count-and-display-number-of-characters-in-a-textbox-usin...

 

What do you think?

 









Gemeinsam für digitales Unternehmenswachstum! Wir glauben an Human Centric, Online-Marketing mit Inbound und Digitale Geschäftsprozesse.

Sie wollen mit Ihrem Unternehmen weiter kommen? Mit den Digital-Webern wird der Weg einfacher!

 







 

 

 

@Jaycee_Lewis

0 いいね!
emmyobonyo
メンバー

Add a counter to a text widget

Thanks, @MatthiasWeber. The challenge though is that I'm trying to add the counter to the Hubspot Landing page text editor. I don't have access to it via javascript, so I can't access it. That text editor is part of my Hubspot landing page sidebar (Where I can edit content for the main page). 

0 いいね!
MatthiasWeber
ガイド役 | Solutions Partner
ガイド役 | Solutions Partner

Add a counter to a text widget

understood  . Do you have the options "settings" in the landing page. There should be additional options, where you can add Header-HTML direct. Maybe that helps.  

I attach here a german based screenshot, this should help finding it:

 

 

Can you add here your JavaScripts?

 









Gemeinsam für digitales Unternehmenswachstum! Wir glauben an Human Centric, Online-Marketing mit Inbound und Digitale Geschäftsprozesse.

Sie wollen mit Ihrem Unternehmen weiter kommen? Mit den Digital-Webern wird der Weg einfacher!

 







 

MatthiasWeber_0-1673591688242.png

@emmyobonyo

0 いいね!
Jaycee_Lewis
コミュニティーマネージャー
コミュニティーマネージャー

Add a counter to a text widget

Thank you, @MatthiasWeber 🙌

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 いいね!