废话不多说了额，具体代码如下所示：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{width:500px;height:400px;} table td{width:100px;height:50px;} </style> <script> window.onload=function(){ var inps=document.getElementsByTagName(input); var btn=document.getElementsByTagName("button")[0]; //点击获取table btn.onclick=function(){ var table=document.createElement("ta...
这篇文章给大家分享一个小的JavaScript的案例，就是模仿微博输入框的效果。 效果图：代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿微博输入框效果</title> <script src="jquery.js"></script> </head> <body> <textarea name="" id="" cols="30" rows="10"></textarea> <sapn>您还可以输入<strong style="color:red">140</strong>个字</sapn> </body> <script> //给文本域响应键盘按下事件 $...
在IE10以上版本，微软为了提高IE输入框的便利性，增加了文本内容全部删除和密码眼睛功能，但是有些时候打开新的页面里，输入框却被锁定无法编辑，需要刷新一下页面，或者如果输入框有内容需要点击一下输入框后面的叉叉后才能输入。但是我们需要的是当下需要输入内容。那怎么办呢？可以用下面的方法解决： $("input[type=text]").each(function () { $(this).focus(function () { $(this).select(); }); }); $("textarea").each(fun...
在IE10以上版本，微软为了提高IE输入框的便利性，增加了文本内容全部删除和密码眼睛功能，但是有些时候打开新的页面里，输入框却被锁定无法编辑，需要刷新一下页面，或者如果输入框有内容需要点击一下输入框后面的叉叉后才能输入。但是 我们需要的是当下需要输入内容。那怎么办呢？ 以用下面的方法解决： $("input[type=text]").each(function () {$(this).focus(function () {$(this).select();});});$("textarea").each(function...
本文实例讲述了jQuery实现输入框邮箱内容自动补全与上下翻动显示效果。分享给大家供大家参考，具体如下： 最近在做通行证项目，里面注册模块有邮箱注册，需求方想要在输入 @ 后触发下拉框显示各个邮箱，效果如下：html 代码： <!DOCTYPE HTML> <html lang="en"> <head><meta charset="utf-8"/><title>邮箱自动补全</title><link rel="stylesheet" type="text/css" href="autoComplete.css" media="all"/> </head> <body><h1>邮箱自...
本文实例为大家分享了特殊js文本输入框网页特效，供大家参考，具体内容如下 实例一：让文本框只带有下划线 <script type="text/javascript"> function changeTextStyle(){ //让文本框只带有下划线//获得文本框的DOMvar myText = document.getElementById("myText"); myText.style.borderColor = black; //设置边框颜色myText.style.borderStyle = solid; //设置边框样式为实线myText.style.borderWi...
废话不多说了，直接给大家贴关键代码了，具体代码如下所示： <!DOCTYPE html><html><head><metacharset="UTF-8"><title>输入框清空按钮</title><scriptsrc="js/jquery1.8.3.min.js"></script><script>/** * 校验当前输入框的值,如果不为空显示清空按钮 * @param element */functioncheckInput(element){var value = $(element).val(); if(value!=null&&!=value) $(element).parent().parent().children().children(.button).remove...
本文实现的是一个类似支付宝支付密码的界面，只可以输入数字，且只可以输入6位首先给大家展示下效果图，如果感觉不错，请参考实现代码。1、样式表.wrap{ margin: 10px auto; width: 329px; height: 640px; padding-top: 200px; } .inputBoxContainer{ width: 240px; height: 50px; margin: 0 auto; position: relative; } .inputBoxContainer .bogusInput{ width: 100%; height: 100%; border: #c3c3c3 1px solid; border-radius:...
废话不多说了，直接给大家贴关键代码了，具体代码如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css...
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例<input id="txt" class="text1" type="text" /> <script src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript">$(function () {$("input.text1").val("输入文字！");textFill($(input.text1));}) function textFill(input) {var str = input.val();input.focus(function () {if ($.trim(input.val()) == str) {input.val();}}).blur(function () {if ($.t...
【前言】在大型项目的开发中，插件化是一种趋势，将相似的多次使用的东西封装成公共的插件，以提高开发效率。其他开发人员在调用插件的时候，只需简单的一两行代码就可以实现非常复杂的内容或者效果。在这一节里面我就跟大家分享一下，我是如何封装一个输入框插件的。【呈现分析】（1）默认展示：边框为灰色，中间有输入提示信息（2）获取焦点：边框为蓝色，无输入内容时中间有输入提示信息，有输入内容的时候中间显示输入内容（3）...
遇到的问题:laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的问题(safari下也有同样问题);解决办法:给laydate绑定id;解决前代码:<input id="startTime" placeholder="请输入开始时间" class="laydate-icon" onClick="laydate({istime: true, format: YYYY-MM-DD hh:mm:ss})"> <br> <br> <input id="endTime" placeholder="请输入结束时间" class="laydate-icon" onClick="laydate({istime: true, format: Y...
前言 最近产品需要做不少输入框，产品想要的交互效果是：用户可以输入中英文，随着用户输入能实时显示已经输入的字符个数，当超过数量限制时输入框边框变红，同时给用户提示信息。 这交互听起来没啥问题，技术实现上似乎也没啥难点。但是当我实现出来以后遇到中文输入法就有坑了。 怎么个坑呢，且看下文~~ 实时监测输入框内容长度所遇到的坑使用 oninput事件来监听 使用这个oninput事件的好处有2个： 当用户通过右键复制改变输入框...
我们在编写网页的时候不可避免的会遇到输入框，那么怎么设计输入框才能更加优雅呢？不同的人会有不同的答案，下面分享一个比较不错的设计。 效果图细节 这个效果主要是通过JQuery来实现，我的思路如下：输入框获取鼠标焦点之前，显示原标签的value属性值；获取了鼠标焦点之后，如果当前value有值，那就清空，否则恢复；密码框特殊照顾，待会讲。 实现的代码如下： $("#address").focus(function(){var address_text = $(this).val(...
本文实例讲述了JS实现输入框提示文字点击时消失效果。分享给大家供大家参考，具体如下： 在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的，这个就是“文本框点击时文字消失，失去焦点时文字出现”这个效果；这个效果用个JS就可以完成，这个效果是做网站的人必备的JS代码；自己会写JS的写写也快，不会写的就需要代码收集以作备用，用到的时候就方便多了。 下面就是这个效果实现用到的JS代码： <script lan...