Text input formatter

[YoungMin Kim]

Hello,

I would like to create a text input field that accepts user input and automatically formats it to match a specific pattern, such as a credit card number pattern (0000-0000-0000-0000). The input field should insert a "-" every 4 digits, and any invalid input should be removed.

Do you have any ideas on how to implement this?

[Neil Fraser]

This would be the job of a validator.  Here's an example:

Blockly.Blocks['creditcard'] = {

init: function() {

const validator = function(newValue) {

const digits = newValue.replace(/\D/g, '');

if (digits.length < 8 || !checkLuhn(digits)) {

return null;

}

return digits.replace(/(\d\d\d\d)(?!$)/g, '$1-');

};

this.appendDummyInput()

.appendField(new Blockly.FieldTextInput('', validator));

this.setOutput(true, 'String');

}

};

function checkLuhn(cardNo) {

let s = 0;

let doubleDigit = false;

for (let i = cardNo.length - 1; i >= 0; i--) {

let digit = +cardNo[i];

if (doubleDigit) {

digit *= 2;

if (digit > 9) {

digit -= 9;

}

}

s += digit;

doubleDigit = !doubleDigit;

}

return s % 10 == 0;

}

Here's how it looks:

(The Luhn validator function is courtesy of Stack Overflow.)

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/6c0d90bb-d493-4618-98df-5b75a6dd8528n%40googlegroups.com.

--

Neil Fraser, Switzerland
https://neil.fraser.name

[YoungMin Kim]

Mr. Fraser

Thanks for your solution using the validator. Although I wanted the text field to be updated in real-time, I think this is the best way if I don't want to go for a more complicated approach (creating a completely new custom field

2023년 9월 7일 목요일 오후 9시 43분 52초 UTC+9에 Neil Fraser님이 작성:

[Neil Fraser]

Updates in realtime wouldn't be too difficult -- but only if the user types the number in a linear way.  If they make edits or corrections, then the cursor would jump to the end with every keystroke.  I spent two years dealing with "cursor jumping" in Google Docs, it's a fun problem.

Out of curiosity, can you tell us a bit about your application?  Most developers using Blockly are involved in childhood education.  Credit card numbers don't seem like that area.  We are always interested in learning more about non-educational uses for Blockly.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/13357cf7-e117-44d4-9d71-bc79562fc8d8n%40googlegroups.com.

[amit kumar]

Sir,

        How I can integrate arduino-cli to blockly Arduino on server please help me on this with example

 Warm regards

  Thanks

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAEx9HWGHYWPSZNH_orGythmVQVF%3DYAWnav5pn7c7SUkgAfw1Mg%40mail.gmail.com.

[YoungMin Kim]

Mr. Fraser,

Thank you for your response.

For now, your solution would be good enough for us since we cannot ensure users type the numbers in a linear way.

Actually, the credit card number was just an example. What we are going to implement is a byte array input, such as "AA AF 00 FF AA..." (0-9, a-f, A-F are the only acceptable characters).

If possible, could you please provide me with an example for this as well?

We use Blockly as a part of our application, which provides various custom blocks related to date, time, string, unit conversion, bit/byte manipulation, byte array, and more.

Our application is for general purposes, so it can be used not only for children's education but also for professional purposes.

2023년 9월 8일 금요일 오후 4시 29분 4초 UTC+9에 Neil Fraser님이 작성: