javascript防止在n utf 8个字符后写入表单元素答案

【问题标题】：javascript to prevent writing into form elements after n utf 8 charactersjavascript防止在n utf 8个字符后写入表单元素
【发布时间】：2014-09-14 22:02:32
【问题描述】：

我对我的数据库、表和表行使用utf8_unicode_ci 排序规则。

我的网站语言将包含不常见的字符，例如 ş、Ğ、ö、ü、ç、İ

我有服务器端验证和验证规则，但是为了方便访问者，我想使用以下 javascript 代码：

1-) 防止在n utf8 字符之后写入表单输入，同时实现实时倒计时。

2-)我需要轻松填充 javascript 函数，因为不同的表单输入在同一个 html 页面中具有不同的 n 值

我搜索了我的目标，不幸的是我只能从下面给出的 SO 中找到部分东西 (Count bytes in textarea using javascript)

它计算 UTF8 时 textarea 的字节长度。

getUTF8Length: function(string) {
    var utf8length = 0;
    for (var n = 0; n < string.length; n++) {
        var c = string.charCodeAt(n);
        if (c < 128) {
            utf8length++;
        }
        else if((c > 127) && (c < 2048)) {
            utf8length = utf8length+2;
        }
        else {
            utf8length = utf8length+3;
        }
    }
    return utf8length;
 }

我还在http://jsbin.com/fafonimo/3/edit 上创建了一个示例和简单的 HTML 5 表单，下面也给出了（一些回答者可能想要使用）：

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <form method="post" action="#">
      <!--Fıstıkçı Şahap öğlen ülüküsü çerçöp-->
      <!--35 characters above-->
      <label class="c1" for="id-input">NAME OF THE AUTHOR</label>
      <input class="c1" type="text" id="id-input" name="author">
      <input class="c1" type="submit" value="Send">
    </form>
  </body>
</html>

CSS

.c1 {width:80%; line-height:1em; padding:1em;margin:1em 10%;}

这绝对不是我对 PHP 或 MySQL 的态度，但很抱歉直接请求解决方案代码。

问候

【问题讨论】：

标签： javascript html mysql utf-8

【解决方案1】：

我在这里找到了答案http://jsfiddle.net/67XDq/7/

问候

HTML

<tr id="rq17">
<td class='qnum'>17.</td>
<td class='qtext'>Questions? <i>Maximum of 500 characters - <input style="color:red;font-size:12pt;font-style:italic;" readonly type="text" id='q17length' name="q17length" size="3" maxlength="3" value="500"> characters left</i><br/><textarea onKeyDown="textCounter(this,500);"
onKeyUp="textCounter(this,'q17length' ,500)" class="scanwid" name="q17" id="q17" rows="5" cols=""></textarea></td>
</tr>

function textCounter(field,cnt, maxlimit) {         
    var cntfield = document.getElementById(cnt) 
     if (field.value.length > maxlimit) // if too long...trim it!
        field.value = field.value.substring(0, maxlimit);
        // otherwise, update 'characters left' counter
        else
        cntfield.value = maxlimit - field.value.length;
}

【讨论】：