AngularJS实现的输入框字数限制提醒功能示例

2024-10-02 11:36:59

本文实例讲述了AngularJS实现的输入框字数限制提醒功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.jb51.net AngularJS字数提示</title>
</head>
<style>
  *{
    margin:0;
    padding:0;
  }
  input,button,textarea,select{
    outline:none;
  }
  textarea{
    resize:none;
  }
  .content{
    width:350px;
    height:150px;
    font-size:18px;
    text-indent:40px;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  .content:hover{
    border:1px solid #00ffff;
    cursor:pointer;
  }
  .top{
    vertical-align:top;
  }
  .fontColor
  {
    color:#eee;
  }
  .tableT td{
    margin-right:20px;
  }
</style>
<body ng-app="myApp" ng-controller="myControl">
<table class="tableT">
  <tr>
    <td class="top">退货说明&nbsp:</td>
    <td><textarea id="sayId" class="content" ng-model="say" ng-keyup="changeText()"></textarea></td>
  </tr>
  <tr>
    <td></td>
    <td class="fontColor">你还可以输入{{textLength}}字</td>
  </tr>
</table>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module('myApp',[]);
  app.controller('myControl',function($scope){
    $scope.textLength = 10;
    $scope.changeText = function(){
      var length = $("#sayId").val().length;  //使用$scope.say.length的时候，输入空格的时候没有计算空格长度。
      console.log(length);
      $scope.textLength = 10 - length;
      if($scope.textLength<=0){
        $scope.textLength = 0;
        $("#sayId").val($scope.say.slice(0,10));
      }
    }
  });
</script>
</html>

运行效果：

PS：这里再为大家推荐2款功能相似的在线工具供大家参考：

在线字数统计工具：
http://tools.jb51.net/code/zishutongji

在线字符统计与编辑工具：
http://tools.jb51.net/code/char_tongji

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

JavaScript输入框字数实时统计更新

在前端开发中,很多情况下需对输入内容进行验证.实时统计功能,对于定长输入而言,可以让用户实时明确输入界限,并合理安排内容. 字数实时统计更新下面将以[消息内容]为例,设计实现输入框字数实时统计更新功能. 项目架构如下: message message.css message.js message.tpl 1. 在message.tpl文件中定义网页元素 //移动端微信公众号开发 <div class="weui-cell__bd"> <textar
Javascript实现真实字符串剩余字数提示的实例代码

复制代码代码如下: //文本框剩余字数提示(字符大小) function textLimitCheckSj(thisArea, maxLength, SpanId) { var str = thisArea.value; if (getChrLen(str, maxLength) > maxLength * 2) { thisArea.value = str.substring(0, x-1); } else { var vars
JavaScript中统计Textarea字数并提示还能输入的字符

现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验. 如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同. 使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一
Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）

把js的验证方法改成angular可使用的方法 AngularJS文件的写法: $scope.clearNoNum = function(obj,attr){ //先把非数字的都替换掉,除了数字和. obj[attr] = obj[attr].replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. obj[attr] = obj[attr].replace(/^\./g,""); //保证只有出现一个.而没有多个. obj[attr] = o
.NET+JS对用户输入内容进行字数提示功能的实例代码

第一步:以下是核心代码,在页面引用或进行封装都可. 复制代码代码如下: <script language="javascript" type="text/javascript"> function textLimitCheck(thisArea, maxLength, SpanId) { if (thisArea.value.length > maxLength) { thisArea.value = thisArea.value.substri
JavaScript动态提示输入框输入字数的方法

本文实例讲述了JavaScript动态提示输入框输入字数的方法.分享给大家供大家参考.具体如下: 在QQ空间里有小纸条那么一个功能,随着你在文本框中输入多少字,上面会动态提示你"已经输入多少字"和"还可以输入多少字",觉得挺好的,所以自己也试着做做,呵呵. 开始,我想很多人第一感觉就是通过js的 onkeydown或者onkeyup来做,中发现还可以用focus + setInterval() +blur来达到我们需要的效果,于是很快的我利用这种方法自己粗糙的写
利用Angularjs和原生JS分别实现动态效果的输入框

在刚开始没有给输入框添加焦点之前,没有任何效果.见下图: 然后点击其中任何一个,焦点就会触发一个动画,动画的结果见图二: 中间的输入登录密码文字,会自动添加到顶部(原谅我没有截取到动画过程的图片). 我测试了一下,这样的效果只有高级浏览器支持(IE只有IE10.IE11.Edge支持). 下面我来把代码贴上来,原理很简单,就是通过事件触发类名的增加和删除.具体的动画由CSS3来实现,这也是为什么低级浏览器不支持的原因. 原生JS实现示例: <!DOCTYPE html> <html la
关于JavaScript限制字数的输入框的那些事

前言最近产品需要做不少输入框,产品想要的交互效果是:用户可以输入中英文,随着用户输入能实时显示已经输入的字符个数,当超过数量限制时输入框边框变红,同时给用户提示信息. 这交互听起来没啥问题,技术实现上似乎也没啥难点.但是当我实现出来以后遇到中文输入法就有坑了. 怎么个坑呢,且看下文~~ 实时监测输入框内容长度所遇到的坑使用 oninput事件来监听使用这个oninput事件的好处有2个: 当用户通过右键复制改变输入框内容时,可以监听到: 只有在输入框内容发生变化时才会触发此事件,比如用户按下
AngularJS实现的输入框字数限制提醒功能示例

本文实例讲述了AngularJS实现的输入框字数限制提醒功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net AngularJS字数提示</title> </head> <style> *{ margin:0; paddi
AngularJS指令与指令之间的交互功能示例

本文实例讲述了AngularJS指令与指令之间的交互功能.分享给大家供大家参考,具体如下: 前面一篇文章<AngularJS指令与控制器之间的交互功能示例>我们了解了指令与控制器之间的交互,接下来看看指令与指令之间是如何进行交互的. 1.首先来了解一下什么是独立scope 为了更好的理解独立scope,我们来看一段代码: <div ng-controller="myController1"> <hello></hello> <hel
AngularJS指令与控制器之间的交互功能示例

本文实例讲述了AngularJS指令与控制器之间的交互功能.分享给大家供大家参考,具体如下: 本节我们来看控制器与指令之间的交互 1.首先来看最简单的,在指令中调用父控制器的方法: <div ng-controller="myController1"> </div> app.controller('myController1',['$scope',function($scope){ $scope.load=function(){ console.log('正在加
AngularJS自定义插件实现网站用户引导功能示例

本文实例讲述了AngularJS自定义插件实现网站用户引导功能.分享给大家供大家参考,具体如下: 最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了"用户引导"功能,对于初次进入系统的用户一些简单的使用培训training.对于大多数网站来说,这是一个很常见的功能.所以在开发这个任务之前,博主尝试将其抽象化,独立于现有系统的业务逻辑,将其封装为一个通用的插件,使得代码更容易扩展和维护. 无图无真相,先上图: 关于这款trainning插件的使用很简单,它采
Angularjs过滤器实现动态搜索与排序功能示例

本文实例讲述了Angularjs过滤器实现动态搜索与排序功能.分享给大家供大家参考,具体如下: 利用angularjs实现动态的插入以及利用过滤器进行数据的搜索以及排序. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>www.jb51.net AngularJS过滤
Python实现的微信红包提醒功能示例

本文实例讲述了Python实现的微信红包提醒功能.分享给大家供大家参考,具体如下: #coding=utf-8 import itchat from itchat.content import TEXT from itchat.content import * import sys import time import re reload(sys) sys.setdefaultencoding('utf8') import os @itchat.msg_register(NOTE,isGroup
AngularJS实现的base64编码与解码功能示例

本文实例讲述了AngularJS实现的base64编码与解码功能.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>base64加密</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js&qu
kotlin实现通知栏提醒功能示例代码

一.概述 2019年英雄联盟LPL赛区赛季赛打得火热,作为一个RNG粉丝,想通过app实现RNG赛程提醒,于是就有了这次技术实践.我在网上找了很久,几乎没找到使用kotlin实现通知栏提醒的合适的文章,于是就到安卓官网看文档,一边翻译一边研究,最终实现了一个简单的通知栏提醒.又研究了定时任务,但没有成功,还望看到的大佬给个锦囊. 二.环境 kotlin版本:1.3.31 android studio版本:3.4.1 在华为手机android 9 API28 环境下测试通过三.实现 1.创建一个
jQuery实现简易的输入框字数计数功能示例

本文实例讲述了jQuery实现简易的输入框字数计数功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.7.2.min.js"></scr
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】

本文实例讲述了JavaScript实现的仿新浪微博原生态输入字数即时检查功能.分享给大家供大家参考,具体如下: 边在文本框输入字符边对输入的字数进行检查本来不难的,但是由于其中有些函数的使用方式大家容易混乱,很容易导致整个结果搞来搞去也没有搞出来,也容易出Bugs,注意这里不能再使用length函数了,因为这个东西英文算一个字符,汉字也算一个字符,不符合数据传递的形式.也不能用OnChange事件了,这事件要光标离开为文本框才会触发,必须改成更加即时的OnKeyUp. 一.基本目标如下图,完成

AngularJS实现的输入框字数限制提醒功能示例

相关推荐

随机推荐