jQuery在文本框中的实际场景应用-反馈建议框

作者: Jancaelm 分类: jQuery 发布时间: 2017-08-02 14:59

我们的软件通常都会制作一个反馈意见的页面,通过输入一个文本框并提交意见.
但是为了避免向数据库中插入空的、过长的数据,我们可以使用jQuery在前端页面中对文本框,按钮进行限制.
思路如下:

  1. 在文本框中没有内容时,提交按钮不可点击;
  2. 在文本框内输入时,按钮实时变为可点击状态;
  3. 若将文本框中内容删除,按钮实时变为不可点击状态;
  4. 文本框中设计一个实时文字计数器.

实现效果:
没有内容时,按钮不可点击:

向文本框内输入内容,按钮变为可点击:

继续输入内容,计数器实时更新:

删除这些内容,按钮重新变为不可选取的状态:

 
代码实现:

  • html部分:
  • 您的意见与建议!
    0/200
    提交
  • js(需要jQuery):
  • 
    

    经过一番思考,发觉这个文本框还有可以改进的地方,就是如果文本框内全部输入空格时,也不允许提交
    实现效果:

    实现方式:
    在判断语句中加入一句去除尾部空格之后是否为””
    代码:

    if ($("#textMeg").val().length==0||$("#textMeg").val().trim()=="")

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注