Cleave.js: Bad input behavior when using multiple characters as delimeters

[fcoms]

Hello,

I was playing with the JSFiddle examples and when using the following configuration:

new Cleave('.input-5', {
    uppercase: true,
    delimiters: [' | ', ' | ', ' | '],
    blocks: [3, 3, 3, 2]
});

After the first block is typed, the next character is inserted with a pipe '|'. If I keep typing, all the characters start being replaced with '|' too. The overall input starts to behave incorrectly.

Also seeing the same with characters like: ?, ^ and +

Example:

| Characters pressed | Result |
| --- | --- |
| 123 | 123 | |
| 4 | 123 | |4 |
| 5 | 123 | |4 | 5 |
| 6 | 123 | ||| | 4|5 | 6 |

Thanks!

[nosir]

Cleave.js only supports one character delimiter, or delimiters, your delimiter | has spaces, so it fails. This can be an improvement ticket, I will have a look.

Cheers.

[alex-ketch]

@caiprismo One way I got around this was to cheat and use a block of 0 and a delimiter of a space .
So your example would be along the lines of this:

new Cleave('.input-5', {
    uppercase: true,
    delimiters: [' ', '|', ' ', ' ', '|', ' ', ' ', '|', ' '],
    blocks: [3, 0, 0, 3, 0, 0, 3, 0, 0, 2, 0]
});

[nosir]

Lol, brilliant! will add to the example.