`
冰糖葫芦有点酸
  • 浏览: 29809 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

JavaScript 实现input输入框逐字输入效果

阅读更多
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
</head>
<body>
	<input id="container"></input>
 
	<script type="text/javascript">
 
		$("#container").on("click",function(){
			var con  = $("#container");
			var s = "4301819";
			var len = s.length;
			var index = 0;
			var tid = null;
 
			con.val('');
			tid = setInterval(function(){
				//con.append(s.charAt(index)); // 更新text属性可以用append,比如更新div中的内容
				con.val(con.val() + s.charAt(index));
				if(index ++ === len){
					clearInterval(tid);
					index = 0;
				}
			},100);
		});
	</script>
 
</body>
</html>
分享到:
评论

相关推荐

    jquery实现input输入框实时输入触发事件代码

    要实现输入框(input)中的内容实时更改时触发特定的事件处理函数,可以使用JavaScript的jQuery库来简化操作。以下知识点将详细解释如何利用jQuery为input输入框绑定一个事件,该事件在用户输入时即时响应,并执行预...

    利用javaScript实现点击输入框弹出窗体选择信息

    在本文中,我们主要介绍如何使用JavaScript技术实现一个功能,即当用户点击输入框时,会弹出一个窗体供用户选择信息。这个过程涉及到了JavaScript的基本语法、DOM操作、事件处理以及简单的样式应用等知识点。 首先...

    输入框只能输入0.5的倍数

    标题“输入框只能输入0.5...总的来说,实现“输入框只能输入0.5的倍数”的功能需要结合HTML5的表单控制特性以及JavaScript的事件监听和数据验证。在实际应用中,还可以考虑使用前端框架和库来提高开发效率和用户体验。

    日期控件(input输入框)

    jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互,使得开发者能更高效地编写JavaScript代码。 首先,我们需要了解HTML中的`&lt;input&gt;`标签,它可以用来创建各种类型的输入控件,...

    input输入框蓝光特效

    在IT行业中,前端开发是构建用户界面的关键部分,而`input输入框`是网页表单中最常见的元素之一,用户可以通过它来输入数据。蓝光特效则通常是指在用户聚焦或激活input输入框时,为输入框添加的一种视觉效果,使得...

    点击input输入框弹出选择层(基于jquery)

    在网页设计和开发中,有时候我们需要为用户提供更加交互式的体验,比如当用户点击一个input输入框时,弹出一个选择层来供用户选择。这样的功能通常用于下拉菜单、日期选择器或者选项列表等场景。在这个案例中,我们...

    【JavaScript源代码】element input输入框自动获取焦点的实现.docx

    在JavaScript和Vue.js开发中,有时我们需要实现一种功能,即当页面加载或特定事件发生时,使输入框(input)自动获取焦点。这样的需求在创建表单或评论系统时尤其常见,用户可以直接开始输入而无需手动点击输入框。...

    基于vue2.0的input输入框文字特效

    【描述】提到的特效主要是在input输入框获得焦点时,通过JavaScript(可能结合CSS)添加动画效果。这可能是改变输入框的边框颜色、大小、阴影或者添加其他视觉反馈。这种技术可以增加用户的注意力,使得交互过程更加...

    javascript 实现输入多行动态输入

    ### JavaScript 实现输入多行动态输入 在网页开发过程中,特别是在使用JSP处理用户输入时,经常需要收集用户的多行输入。本篇文章将基于提供的标题、描述和部分内容,详细阐述如何利用JavaScript实现输入多行动态...

    JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数

    在JavaScript中,我们经常需要限制用户在input输入框中输入特定格式的数据。例如,在处理金额或现金输入时,我们通常需要限制用户输入整数、小数,并且小数部分最多只能有两位数字。为了实现这样的输入限制,我们...

    输入框input样式,各种效果齐全

    此外,还可以结合JavaScript实现动态效果,如验证输入内容、添加提示信息、禁用或启用输入框等。例如,以下代码用于检查用户名是否为空: ```javascript document.getElementById("username").addEventListener(...

    input输入框获取js点击文字内容.zip

    在"input输入框获取js点击文字内容.zip"这个压缩包中,我们可以预见到包含了一个简单的HTML页面(index.html),该页面可能实现了通过JavaScript来获取用户在输入框中输入的文字内容的功能。下面将详细介绍HTML5的`...

    Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)

    为了实现对输入的限制,我们可以创建一个自定义的JavaScript函数,该函数会在用户每次在指定的input输入框中键入内容时被调用。这个函数的作用是过滤掉不符合要求的字符,只保留数字和小数点,并且确保小数点的使用...

    jQuery/JS监听input输入框值变化实例

    与onchange不同,oninput事件在用户输入时就会触发,即输入框的值发生变化的那一刻就会触发,非常适合需要实时反馈输入情况的场景。oninput事件在大多数现代浏览器中都得到支持,包括Firefox, Google Chrome, Opera,...

    JS实现身份证输入框的输入效果

    JS实现身份证输入框的输入效果主要涉及前端开发技术,特别是HTML、CSS和JavaScript。在介绍具体实现方法之前,我们先来了解一下身份证号码的一些基本规则,以及为何要实现特定的输入效果。 中国的居民身份证号码由...

    jquery输入框提示插件input输入框文字下拉提示添加标签代码

    标题和描述提到的“jquery输入框提示插件input输入框文字下拉提示添加标签代码”是一个关于如何利用 jQuery 和相关技术实现这种功能的方法。 这个插件的主要目的是当用户在输入框中输入文字时,提供实时的下拉提示...

    解决webgl输入框无法输入中文插件

    这类插件可能通过模拟键盘事件或者与浏览器更深度的集成来绕过原生输入框的限制,从而实现中文输入。此外,`WebGLInput`可能是一个单独的输入管理模块,也可能提供了类似的解决方案。 要充分利用这些插件,开发者...

    input框只能输入数字和一个小数点

    在IT领域,特别是前端开发中,对于输入框(input)的控制与验证是十分关键的一环,这直接关系到用户体验和数据的有效性。标题“input框只能输入数字和一个小数点”以及描述“input框只能输入数字和一个小数点,对...

Global site tag (gtag.js) - Google Analytics