Javascript防止在n utf8字符之后写入表单元素

javascript to prevent writing into form elements after n utf 8 characters

本文关键字:之后 表单 元素 字符 utf8 Javascript      更新时间:2023-09-26

我使用utf8_unicode_ci排序对我的数据库,表和表行。

我的网站语言将有不常见的字符,如::,Ğ, ö, ü, ç, İ

我有服务器端验证&验证规则,但是为了访问者的舒适,我想使用一个javascript代码:

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

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

我搜索了我的目标,不幸的是,我只能从下面给出的SO找到部分内容(使用javascript在textarea中计数字节)

在UTF8时计算文本区域的字节长度。

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表单,下面也给出了(一些答案可能想要利用):

<!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的态度,但是很抱歉直接要求解决方案代码。

我在这里找到了答案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>

JS

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