Hi all,
I'm currently working on putting some additions on my project and I wanted to add a small counter that tells the user how many characters they have left to input into a text field in real time.
Currently I have a binding on a label component that calculates '250 - len(currentString)' and this is refreshed via a message handler on the textArea itself. Note: 250 is the amount of space I allocated in a data base column and the string will only be saved if it is less than 250. The problem is: it will refresh the result but on inconsistent timings it seems.
I'm not entirely sure if what I want to do is possible but I'd like to have it so that when the user inputs any character the counter goes down instantly as they're typing.
Current label binding:
message handler:
![image](https://global.discourse-cdn.com/inductiveautomation/original/3X/8/8/88449778bfcff9536560aec51d56db1d1e5a815f.png)
textArea simply sends a message on a handful of different events at the moment for both keyboard and touch screen.
Thank you,
Cam
- uncheck the
deferUpdate
checkbox in the text field's property. This will make the text
property update in real time
- bind a label to the text field's
text
property and use its length there. Make it an expression binding that looks something like this: 250 - len({../textField.text})
(use the property browser to get the right path)
- be careful with naive approaches like this. Some characters are bigger than just one byte. Depending on expected languages and encodings, you might need to use a more robust method.
edit: Just noticed you're using a text area and not a text field. But it should work the same way.
For what I wanted it to do it is working, Thank you ![:slight_smile: :slight_smile:](https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12)
What suggestions do you have to make it more robust?
If you're only going to save the content if it is less than 250 characters, it might be best to actually limit the content of the input.
See this post for how to limit the number of characters an input will accept.
That is also a nice addition to the view. Thank you ![:slight_smile: :slight_smile:](https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12)