用css或js实现文本输入框的特效

1文本框默认点击特效: 点击文本框,外围会出现蓝色阴影,取消该特效,为该文本框添加css样式"outline:none;",就取消了默认特效. 2实现百度搜索框点击特效: 点击文本框,文本框的边框出现蓝色实线,我学习到的实现方法: 基础的html元素: css:为需要该特效的文本框设置该css样式 js:当鼠标点击该文本框时,该文本框的类名改变总结: 学习了js选取html元素的方法: 1 document.getElementById("id");返回一个 2…

CSS和JS实现文本溢出显示省略号

本文记录实现文本溢出显示省略号的几种方式. 单行文本三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 white-space: nowrap; // 设置文本不换行注意: 设置文本溢出显示省略号时必须有宽度 width: 必须要设置display属性为line-block/block,设置为其他值不生效. 多行文本 1. CSS代码实现这种方式用于webkit浏览器或者移动端页面中. 具体例子如…

JS 文本输入框放大镜效果

JS 文本输入框放大镜效果今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件请看kissy demo 其实这种效果对于很多童鞋来说应该并不陌生!我今年最早也是在 12306官网抢票中添加联系人要填写电话号码中看到这种效果!如下图所示: 所以今天下午也就研究下这个,特此分享出来给大家!也做了一个简单的DEMO jSFiddle链接地址如下: JSFiddle链接: 想要查看效果!请轻轻的点击我! 基本原理: 其实基本原理也很简单!通过JS不断的监听输…

JS 仿支付宝input文本输入框放大组件

input输入的时候可以在后边显示数字放大镜 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS 仿支付宝input文本输入框放大组件</title> <script src="js/jquery.min.js"></script> <style>…

html、css、js分工，内核，html头，html表单

html:内容css:样式js:交互内核浏览器控制台输入navigator.userAgent,回车显示出内核"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36"1.webkit(Safari.chrome浏览器内核)2.Trident(IE浏览器内核)3.Gecko(FireFox浏览器内核)4.blink(Goo…

文本输入框input将输入转换为统一大小写

转载地址:http://blog.csdn.net/yieryi_/article/details/52078596 文本输入框input将输入转换为统一大小写,通常有两种方法:JS和CSS方法. 1.JS方式 1).JS方式,通过监控key事件来做到. key事件有三种: keydown event , keypress event, keyup event ps:KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件. 2).KeyP…

js限制文本框只能输入整数或者带小数点[转]

这篇文章是关于js限制文本框只能输入整数或者带小数点的内容,以下就是该内容的详细介绍. 做表单验证的时候是否会碰到验证某个输入框内只能填写数字呢,仅允许输入整数数字或者带小数点的数字.下面这段代码也许能帮到你!通过对当前输入框定义onkeypress,onkeyup,onblur事件对表单做了充分的验证,结果还是非常靠谱的. 复制代码代码如下: type="text" value="" t_value="" o_value="&quo…

ASP.Net MVC4中封装CSS和js冗余代码（不让其大篇的显示在前台上）

(1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用. 由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using System.Web; using System.Web.Optimization; namespace Cn.Com.Farm.Controller { public class BundleConfig { // 有关 Bundling 的详细信息,请访问 http://go.microsoft.com…

HTML中<input>參数，以及文本输入框，文本域的解说

<form> <input type="text/password" name="名称" value="文本" /> </form> 1.type: 当type="text"时.输入框为文本输入框; 当type="password"时, 输入框为密码输入框. 2.name:为文本框命名,以备后台程序ASP .PHP使用. 3.value:为文本输入框设置默认值…

CSS设置input placeholder文本的样式

placeholder是HTML5 input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏览器*/ #field::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } /* 火狐浏览器 */ #field::-moz-place…

html、css、js实现简易计算器

学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需要留下些东西供自己日后回忆,于是写下这篇随笔:因第一次写博客,不知道怎么上传源代码,也不知道怎么在博客页面实现计算效果. 下面是完成后计算器页面: 该计算器只是实现了简易的计算功能,很多其他功能没有实现,如运算的优先级功能,在后面的学习中再慢慢改进吧! 因计算器布局比较规整,故用table表格布局,…

HTML，CSS，JS之间的关系

HTML,CSS,JS之间的关系本笔记是自己在浏览了各位前辈后拼凑总结下来的知识,供自己使用消化.后面会附上各种链接地址,尊重原创最准确的网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript).一.HTML.CSS.JavaScript简介及简单分工1.什么是HTML(超文本标记语言 Hyper Text Markup Language),HTML 是用来描述网页的一种语言.2.CSS(层叠样式表 Cascading Style Sheet…

js统计文本框剩余可输入字数

js统计文本框剩余可输入字数 <html><head runat="server"> <title></title> <script type="text/javascript"> var maxstrlen = 16; function Q(s) { return document.getElementById(s); } function checkWord(c) { len = maxstrlen;…

JS实现文本中查找并替换字符

JS实现文本中查找并替换字符效果图: 代码如下,复制即可使用: <!DOCTYPE html><html> <head> <style type="text/css"> *{font-family:"微软雅黑";font-size:16px;margin:0;padding:0;letter-spacing:3px;line-height:22px;} #wrap{width:500px;height:300px;m…

HTML、CSS 和 JS框架之Bootstrap

一.Bootstrap简介: Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 详细参考内容:Bootstrap_v3 二.Bootstrap安装: 下载地址:https://v3.bootcss.com/(使用v3版,不要使用最新版) 使用方法一:下载后解压文件bootstrap-3.3.7-dist 这里有一些多余的文件需要删除,方便我们今后更快的找到导入的框架文件,里面三个文件夹分别留这些就行了: 将bootstra…

谷歌浏览器修改CSS和js后同步保存到文件中（译）

本文标题:谷歌浏览器修改CSS和js后同步保存到文件中. 文本作者:魔芋铃. 英文原文:http://www.stephensaw.me/google-chrome-devtools-source-maps/ 谷歌的Chrome DevTools源地图谷歌的Chrome DevTools发展得越来越好,尤其是他们快速的Blink and V8的性能 ,而且他们使DevTools更好. 最近我发现,编辑源代码的正确的方式是使用源映射了Chrome DevTools. Source Maps…

js 控制文本框输入要求

把输入框中输入的字符串含有中文逗号改成英文逗号举例: <input type="text" id="keywords" style="width: 650px;"> js: 用失去光标事件, 关键代码:str.replace(/,/ig,','); $("#keywords").blur(function(){ var str = $("#keywords").val(); …

纯css、js 的H5页面对接echarts

做项目时,会遇到一些零碎的技术点.记录下来以防忘记需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方式(此处为一个中央云南地图的实现方法): 1.定义容器 // 页面逻辑<div class="sp-ynsdt" id="main4"></div> 2.声明参数 var myChart4 = echarts.init(document.getE…

JS控制文本框禁止输入特殊字符

JS 控制不能输入特殊字符<input type="text" class="domain" onkeyup="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'');">this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'') JS 控制文本框只能输入数字<input onkeyup="value=value.repla…

JQuery 加载 CSS、JS 文件

JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = filename; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(lin…

grunt自定义任务——合并压缩css和js

npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.htmlpackage配置文件 http://blog.csdn.net/woxueliuyun/arti…

来，一起让我们越来越懒，面向CSS、JS未来编程。(9.28已更新)

2016.10.29更新本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点就是感觉没必要,还有一点就是难控制.为什么这么说呢?作为刚入门的人来说,第一写的代码就少,平时也不会感觉到代码有什么问题,等开发多了,虽然感觉到问题了,但是你还是很难去按照面向对象的思维去写,因为按照面向对象去思维写需要你把握全局观,更是面向未来编程,把握不好,越写越乱.所以很多新手一直都还是按照面…

如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子

一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this.needAnimat && typeof this.animateHideAction == 'function' && this.status != 'hide') { this.animateHideAction.call(this, this.$el); } else…

Asp.net 后台添加CSS、JS、Meta标签

Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.HtmlControls; /// <summary> /// 添加JS脚本链接 /// </summary> /// <param name="page">页面</param> /// <param name="url"…

django 关于html、css、js 目录位置

项目目录: project/ ---------------init.py ---------------views.py ---------------settings.py ---------------urls.py ---------------static/ -----------------------css/ ----------------------------css.css -----------------------js/ ------------------------…

js控制文本框只能输入中文、英文、数字与指定特殊符号.

先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4E00-u9FA5,数字0-9,英文a-z\A-Z,其它符号@.点或其它符号. 也可以多个,用\隔开就行了. 例如:中英文 + 数字 + @符号 + 点符号 \a-\z\A-\Z0-9\u4E00-\u9FA5\@. 若想在文本框里不能右键弹出菜单和不能粘贴进复制的信息的话就要在''里输入onpaste=&…

CI模板加载css和js

1.需求 ci无法加载css和js文件. 2.解决删除..htaccess文件. 在config目录下配置base_url,并传给页面 $base_url = $this->config->item('base_url'); //通过参数传递到html页面 $this->load->view('form/myform.php', array('base_url'=>$base_url)); 参考资料:http://fc-lamp.blog.163.com/blog/stat…

HTML、CSS、JS对unicode字符的不同处理

unicode字符的不同表示法 unicode字符在html.css和js中的表示方法均不相同,下面分别作介绍. 原文发表于这里 css表示法首先来一段很常见的bootstrap的字体图标代码: .glyphicon-home:before { content: "\e021"; } 上面代码中的e021就是这个字符的unicode码,是16进制. 语法: '\ + 16进制的unicode编码' 如:'\5b89'表示汉字"安": <div class=&…

关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js

网上看过很多配置思路,自己总结了以下, 就把我个人配置的顺序以及材料分享下,webstrom以下简称WB 1.配置less需要安装nodejs,自行安装.因为要用到npm.我是直接把npm解压到C盘根目录的,先下载解压好待用 npm解压包百度云下载地址:http://pan.baidu.com/s/1bpdnmGZ (yuicompressor-2.4.2.jar 这个是WB配置让CSS或者JS自动生成.mincss/.minjs的压缩工具,不是配置LESS的工具哦, 使用很简单不用解压,比我直…

nodejs处理图片、CSS、JS链接

接触Nodejs不深,看到页面上每一个链接都要写一个handler,像在页面显示图片,或者调用外部CSS.JS文件,每个链接都要写一个handler,觉得太麻烦,是否可以写个程序出来,能够自动识别图片.CSS.JS文件链接,以后要调用图片.外部CSS .JS只需要关心前端怎么写,而不用再管后台.于是有了下面的程序. index.js var http = require("http");//获取http对象 var url = require("url");//获取…

【用css或js实现文本输入框的特效】的更多相关文章