一个很棒的类似 Facebook 风格的 TextboxList

输入框键盘事件处理

最新推荐文章于 2019-10-03 19:19:30 发布

原创最新推荐文章于 2019-10-03 19:19:30 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

客户端编程(javascript) 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用键盘事件处理输入框中电子邮件验证的过程。通过监听keyup事件，实现对用户输入内容的实时检查，并在输入不符合电子邮件格式时给出提示。此外，还介绍了如何动态调整输入框的宽度以及将有效电子邮件添加到列表中的方法。

TypeHere.keyup(function (e) {
     switch (e.keyCode) {
         case 188: // ','
            var myInputLength = TypeHere.val().length;
            var myInputText = TypeHere.val().substring(0, myInputLength - 1); // remove ','
            TypeHere.width(myInputLength * 6 + 15);
            //Check for email validation. //You can apply webservices for any type of validation.
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            if (myInputText.length == 0) {
                TypeHere.val('');
                return false;
            }
            if(!emailReg.test(myInputText)) {
              alert('Email Is Invalid');
              TypeHere.val('');
              return false;
            }
            //Create the list item on fly and apply the css
            CreateLi(myInputText)
            //Save into Textbox or HiddenField
            var strValue = txtValues.val() + myInputText + ';';
            txtValues.val(strValue);
            //Push the textbox to the right
            TypeHere.width(myInputLength * 6 + 15);
            //Make the input width to default and set as blank
            liTypeHere.css('left', TypeHere.position().left + TypeHere.width() + 10);
            TypeHere.val('');
            TypeHere.width(10);
            break;
       }
});