How to limit the length of input block?

[Jay An(안재현)]

Hi, 

I am trying to limit the length of textfield inside of a block.

Is there any method or attribute I can use for this feature?

I have searched other question as well, However most of the references are not available these days. 

Thank you :)

[Neil Fraser]

Are you looking for a maximum number of characters the user can type into the text field?  Or are you looking for unlimited characters, but the field won't expand on-screen beyond a certain width (the extra characters are merely hidden, just like a long URL in a browser window)?

--
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/f96f6758-23e6-46f3-82b2-5594cd83c4fdn%40googlegroups.com.

--

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

[Jay An(안재현)]

Yes I am looking for a maximum number of characters the user can type into the text field.

The block is generated by JSON format like below.

  {

     type: 'comment_note',

     message0: 'Comment %1',

     args0: [

        {

            type: 'field_multilinetext',

            name: 'message',

            text: '',

        },

     ],

     inputsInline: true,

     previousStatement: null,

     nextStatement: null,

    style: 'Property',

     tooltip: '',

     helpUrl: has_guide ? helpUrlData['comment_note'] : '',

     extensions: ['warning_check_parent'],

},

This JSON creates a comment block that user can leave comment inside the block and I want to make user type into text field less than 16 characters.

Is there any property I can use to limit the number of characters or should I create extensions for this purpose?

2022년 11월 29일 화요일 오후 11시 53분 6초 UTC+9에 Neil Fraser님이 작성:

[Jay An(안재현)]

I just improvise this feature using methods in Block class (https://developers.google.com/blockly/reference/js/blockly.block_class?hl=en).

onCatchWorkspaceEvent = (event) => {

     const commentBlock = Blockly.getMainWorkspace().getBlockById(event.blockId);

     commentBlock.setFieldValue(event.newValue.substring(0, 16), 'message');

};

I wanted to stop onChange event when character length reaches 16, but could not find the method does such thing.

Therefore I have decided to just substring the string that user types in. 

If there are other way to do it, let me know!

Thank you

2022년 11월 30일 수요일 오전 9시 36분 43초 UTC+9에 Jay An(안재현)님이 작성:

[Beka Westberg]

Hello =)

If you just want to change how many characters are displayed without actually limiting how many characters the user can type, you can set maxDisplayLength.

```

  {
     type: 'comment_note',
     message0: 'Comment %1',
     args0: [
        {
            type: 'field_multilinetext',
            name: 'message',
            text: '',
        },
     ],
     inputsInline: true,
     previousStatement: null,
     nextStatement: null,
    style: 'Property',
     tooltip: '',
     helpUrl: has_guide ? helpUrlData['comment_note'] : '',
     extensions: [

      'warning_check_parent',

      'set_max_display_length',  // This line added!!

    ],
},

const helper = function() {

  // `this` is the block.

  this.getField('message').maxDisplayLength = 16;

}

Blockly.Extensions.register('set_max_display_length', helper);

```

If you want to actually limit the length of the valid  input, you can use a validator attached to the input field.

```

  {
     type: 'comment_note',
     message0: 'Comment %1',
     args0: [
        {
            type: 'field_multilinetext',
            name: 'message',
            text: '',
        },
     ],
     inputsInline: true,
     previousStatement: null,
     nextStatement: null,
    style: 'Property',
     tooltip: '',
     helpUrl: has_guide ? helpUrlData['comment_note'] : '',
     extensions: [

      'warning_check_parent',

      'validate_max_length',  // This line added!!

    ],
},

const helper = function() {

  this.getField('message').setValidator(

    (newValue) => newValue.substring(0, 16));

}

Blockly.Extensions.register('validate_max_length', helper);

```

I hope that helps! If you have any further questions please reply =)

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/68e2c6be-d1ad-47bf-80a3-62f379b59e8en%40googlegroups.com.

[Jay An(안재현)]

Hi Beka :)

Thanks for your answer! 

I followed your code to create the extensions. However, it is not working as I expected.

When I typed in characters inside of a block and when it reaches 16 characters long, the line breaks is happening and still onchange event is taking place.

After I focus out the block, the characters are trimmed to 16 characters.

Suppose, I set maximum length as 5 characters and type in...

hello

nicet

omeet

you

And when the block is focused out,

hello

Should I add option that stop line breaks as well?

Thank you! 

2022년 12월 2일 금요일 오전 12시 55분 17초 UTC+9에 bwes...@google.com님이 작성:

[Beka Westberg]

Oh I think that's because you're using a multiline text field! If you use a "normal" text field instead I don't think you'll get line breaks. Eg:

```

  {
     type: 'comment_note',
     message0: 'Comment %1',
     args0: [
        {

            type: 'field_input',  // This line changed!

            name: 'message',
            text: '',
        },
     ],
     inputsInline: true,
     previousStatement: null,
     nextStatement: null,
    style: 'Property',
     tooltip: '',
     helpUrl: has_guide ? helpUrlData['comment_note'] : '',
     extensions: [

      'warning_check_parent',

      'set_max_display_length',

    ],
},
```

I hope that helps! If you have any further questions please reply =)

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/ac785d9d-96b5-4b48-8770-528470d84160n%40googlegroups.com.

[Jay An(안재현)]

Hi Beka :)

Thanks for your answer, now I can set characters displayed length and limit the length as well.

I have two questions I would like to ask.

1. Is it possible to change the type of text field using method in block? As you may know current type of comment_note is set to field_multilinetext like below.

```

{
     type: 'comment_note',
     message0: 'Comment %1',
     args0: [
        {

            type: 'field_multilinetext, 

            name: 'message',
            text: '',
        },
     ],

},

```

However, this type is predefined by someone so I am not allowed to change it on my own.

Therefore I am looking for the way I can change the type using method in block such as below.

```

Blockly.Extensions.register('set_block_field_type', function() {

   // just example

     this.setBlockFieldType('field_input')

}

```

2. Is it possible to show ellipsis when the characters user types in exceeds the limit?

Suppose the limit is set to 5 characters long but user types characters that exceeds that number

```

// characters that user types in

hello nice to meet you

// How it is supposed to be shown when focus out the block text field

hello...

```

Thank you!

2022년 12월 7일 수요일 오전 1시 16분 31초 UTC+9에 bwes...@google.com님이 작성:

[Maribeth Bottorff]

Hello,

For question one, it's not possible to change the type of a field. You can potentially remove the bad field and add the one you want, but you would need to add a mutator to save that information about the block (so that when you load the serialized state, the block knows which type of field to add, either the multiline or not multiline). But that's adding a lot of complexity for an unusual use case. If you want your block to function differently than someone else's block, you should probably just define your own type of block. But, I am not sure from your question if you are really opposed to the user typing in multiline text or you just don't want them displayed in the truncated text.

For question two, that is already part of the default field. It should add the ellipsis automatically. However, that is part of the max display length only.

I am a bit confused, because earlier in the thread you said you wanted to limit how much a user could actually type in. If you limit them to only typing 5 characters, and trim out the rest, then it does not make sense to show an ellipsis because there is no additional text that is saved. So if you are doing *both* of the extensions Beka showed then it makes sense you are not seeing the ellipsis appear, because the saved text is never longer than the display text. Most likely, it only makes sense to use one of these extensions or the other, not both at the same time. It depends if you want to just want to shrink the block appearance when it is not being edited (max display length) or if there is a hard limit on the data they can enter (and more characters would be an error, so we have to strip them out) (that would be the validator approach where you trim the actual value, not just the displayed text).

Maribeth