Best way to display "input too long" errors with Unicode login?

Question

Does anyone have any good suggestions for displaying "maximum length" errors for the user when one character is not equal to one byte?

I do not understand the words, but I found a quote more eloquent :

If the buffer runs through three bytes, what will you tell the user? Three bytes can be one, two, or three characters that the user must trim. Depending on which characters they crop, the result may be too long. And remember that the user's perception of the “character” is probably closer to the grapheme or grapheme cluster than to the character. In this way, they can delete too many characters without realizing it. Finally, if the buffer limit is small (for example, 10 or 20), some languages, such as Chinese, will be strictly limited by the number of characters allowed.

A couple of limitations I'm on is that her forms-based website and database column sizes cannot change (a quote page assumes a 40-bit buffer and an enforced 10character constraint).

Answer 1

My favorite way to solve this problem is to select the part of the input that exceeds the maximum length. This gives a visual signal about what part makes it "too long", without having to delve into the specifics of the number of bytes or characters.

If you can use Javascript (for example, if you do not need to comply with the 508 standards), I also like to track the length of the field and warn the user when it is too long (when performing a server-side check, of course).

If you don’t want to get into complex CSS inside the input field, you can simply reproduce the bad input under the field and select it there.

Answer 2

.

, , . , . , , , .

Answer 3

... : " N" (, " 4" ). , ... , . , N ()... " 3"... 3 ( 9 ).

, , "" , .

Answer 4

. , , Unicode . , SQL Server NVARCHAR MySQL UTF-8 . , " ", ".

, , , , " ", , .

You really cannot generally expect anyone to hammer in UTF-8 byte numbers. Perhaps on the client side you can do this purely visually using the "amount of string used instead of a few bytes:

<style type="text/css">
    .field { width: 12em; }
    .field input { width: 100%; }
    .field input { box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box; }
    .indicator { background: blue; height: 5px; }
    .indicator-over { background: red; height: 5px; }
</style>

<div class="field">
    <input type="text" name="pwd" class="limited-12">
</div>

<script type="text/javascript">
    function limitInput(element, limit) {
        var indicator= document.createElement('div');
        element.parentNode.insertBefore(indicator, element.nextSibling);
        element.onchange=element.onkeyup= function() {
            var utf8= unescape(encodeURIComponent(element.value));
            indicator.className= utf8.length>limit? 'indicator-over' : 'indicator';
            var used= Math.min(utf8.length/limit, 1);
            indicator.style.width= Math.floor(used*100)+'%';
        }
        element.onchange();
    }

    var inputs= document.getElementsByTagName('input');
    for (var i= inputs.length; i-->0;)
        if (inputs[i].className.substring(0, 8)=='limited-')
            limitInput(inputs[i], parseInt(inputs[i].className.substring(8)));
</script>