使用 unicode 输入显示“输入太长”错误的最佳方法？答案

【问题标题】：Best way to display "input too long" errors with unicode input?使用 unicode 输入显示“输入太长”错误的最佳方法？
【发布时间】：2009-03-21 16:47:13
【问题描述】：

当单个字符不等于一个字节时，是否有人对向用户显示“超出最大长度”错误有好的建议？

我不知所措，但我找到了a quote that's more eloquent：

如果缓冲区超出三个字节，你会告诉用户什么？三个字节可以是用户需要修剪的一个、两个或三个字符。根据他们修剪的字符，结果可能仍然太长。回想一下，用户对“字符”的感知可能更接近于字素或字素簇而不是字符。所以他们可能会在没有意识到的情况下删除太多字符。最后，如果缓冲区限制很小（如 10 或 20），则某些语言（如中文）将严格限制允许的字符数。

我遇到的一些限制是它是一个表单驱动的网站，并且基础数据库列的大小不能改变（报价页面建议有一个 40 字节的缓冲区并强制执行 10 个字符的限制）。

【问题讨论】：

嗯，你提到的例子只是 JavaScript。这对于更好的用户体验来说是可以的，但应该在服务器端进行真正的检查。你用什么语言编码？

标签： unicode error-handling

【解决方案1】：

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

如果你会使用 Javascript（例如，如果你不需要满足 508 标准），我也喜欢监控字段的长度并在它太长时提醒用户（同时还在做服务器端验证，当然）。

如果您不想在输入字段中进入复杂的 CSS，您可以在字段下方重现错误输入并在此处突出显示。

【讨论】：

【解决方案2】：

明显的正确答案是不限制文本长度。

但如果你不能告诉用户他们必须玩多少个角色，那就不要。当字符串太长时，只需告诉他们。跟踪当前字符串需要多少字节，如果超出限制，请为用户启用警告消息。

【讨论】：

【解决方案3】：

只是大声思考......为什么不更具体：“最大长度超过 N”（例如，“最大长度超过 4”）。您不会告诉用户最大长度是多少......只是他们超过了它。而且您不会告诉用户 N 代表什么（字节）......当他们看到“太长 3”的消息时......他们将删除至少 3 个字符（即使他们可能会删除 9 个实际字节）。

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

【讨论】：

【解决方案4】：

好问题。不确定是否有一个好的答案，除了将架构更改为使用 Unicode 字符而不是字节。例如，在带有 NVARCHAR 的 SQL Server 或带有 UTF-8 排序规则的 MySQL 中，列受字符长度的限制。当然，即使它们在技术上是相同的“长度”，这也有点推动“列长度不能改变”。

不管怎样，东亚用户将习惯于字符不是字节的想法，因为“半角”拉丁字符占据一半的存储空间和屏幕空间的传统由来已久作为中国的象形文字。

您通常不能指望任何人都能理解 UTF-8 字节数。也许在客户端，您可以纯粹以视觉方式完成，使用“使用量”栏而不是字节数：

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

【讨论】：