How to prevent a character from being added to a TextField component

I'm tracking down an issue with getting numeric input.

Initially I was using a Numeric Entry Field, but ran into issues with using numbers with digits to the right of the decimal point. Even though it was a valid number, the tooltip displayed asks the user to input a valid value.

In addition to that issue, the value of the numeric entry field is not set until it loses focus. I was sending a message from the component when Enter was pressed, and when the message handler script was running the value of the component was None.

To hopefully fix these issues, I'm now working with a Text Field component. I have the deferUpdates property set to False.

I have an onKeyDown script that checks if the key pressed was a number, period, or a minus sign. It prints a message to the browser console indicating if the key was valid or not.

The commented code was to prevent adding a minus sign or a period if one was already in the text property. When the event wasn't firing at all due to the deferUpdates property being true, I commented that code for troubleshooting.

What I'm trying to figure out is how to prevent adding the character to the text property of the Text Field component? Does the event handler need to return a value to tell the application that the key shouldn't be added?

While the Ignition user manual does mention the onKeyDown event, it does not mention any details about it. This is the limit of what is in the user manual for this event.

Any help would be greatly appreciated.

The issue is that your event code runs in the gateway, and the browser cannot wait for that round trip before showing what is typed. You might make something work with javascript injection, but preventing invalid characters is probably the wrong approach.

I recommend you use an allow/deny model where invalid characters show a separate message and prevent use of the value downstream.

1 Like

This is my preferred action - to allow a user to enter the value they want before the system takes any action.

That doesn't sound correct. I would troubleshoot that issue further.

The reason for it checking for Enter on the Numeric Entry Field component (and eventually the Text Field component) is that the values entered in the component are sent by a device acting as a keyboard wedge. I think in this case it is a measuring gauge that sends the measurement when a button is pressed on the device.

The value is sent from the device with a line feed character at the end of it. They wanted the value to be saved when the line feed was detected.

To attempt to do this, a message was sent from the component to the containing view's parent to process the input. The message handler checks to see if the value is between a min/max value and displays a popup view for the user to enter a comment for the out of spec value.

The first time the message is sent, the popup view always shows the value from the input as None. This is because focus had not yet left the component at the time the message was sent, so the value property of the component wasn't updated.

When the popup view is closed and Enter is pressed again on the Numeric Entry Input component the value is passed because focus left the component, so the value of the component was set.

The initial behavior of pressing Enter on the component was setting the focus on a button. Clicking the button or pressing Enter while the button had focus would send the same message as the onKeyUp event on the component, but since focus left the Numeric Entry Input component the value was updated.

Things would be so much easier if they were happy with this option.

I was trying to figure out how to do this.

I'm normally developing web sites with C#, JavaScript, and Microsoft Blazor. Doing it with Perspective is a bit different in some ways.