用Unicode输入显示“输入太长”错误的最佳方法?

我最喜欢的解决这个问题的方法是 突出显示超出最大长度的输入部分。 这提供了一个视觉提示,说明哪个部分“太长”,而不必详细说明它是多少字节或字符。

如果您可以使用javascript(例如,如果您不需要满足508标准),我还喜欢监视字段的长度,并在字段太长时提醒用户(当然,在进行服务器端验证的同时)。

如果您不想在输入字段中使用复杂的CSS,只需在该字段下面重现错误的输入并将其突出显示。

明显的 对的 答案是不要限制文本长度。

但是,如果你不能告诉用户他们需要玩多少个字符,就不要告诉他们。只要告诉他们字符串太长的时候。跟踪当前字符串所需的字节数,如果超出限制,则为用户启用警告消息。

只是大声地想…为什么不那么具体:“最大长度超过n”(例如,“最大长度超过4”)。你不能告诉用户最大长度是多少…只是他们不喜欢。你不能告诉用户n代表什么(字节)。当他们看到信息“太长了3”…它们将删除至少3个字符(即使它们可以删除9个实际字节)。

我认为没有办法向用户解释为什么某些“字符”需要多个字节,而这些字节很可能不会混淆它们。

问得好。除了将模式更改为使用Unicode字符而不是字节之外,不确定是否有一个好的答案。例如,在使用nvarchar的SQL Server或使用utf-8排序规则的MySQL中,列的长度受到字符长度的限制。当然,即使它们在技术上是相同的,列长度也不能改变。

就其价值而言,东亚用户将习惯于认为一个字符不是一个字节的想法,因为有一个悠久的传统,即“半宽”拉丁字符占据了中国表意字符一半的存储和屏幕空间。

但是,您不能期望任何人搜索UTF-8字节数。也许在客户端,您可以使用__amount used__bar而不是字节数进行纯视觉操作:

<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>