修改input和textarea的placeholder的颜色,限制文本框字数输入
<style type="text/css">
textarea{
width: 400px;
height:400px;
resize: none;
}
.limit{
width: 400px;
text-align: right;
}
#d1{
margin: 100px;
}
input::-webkit-input-placeholder{
color:red;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:red;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:red;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:red;
}
textarea::-webkit-input-placeholder{
color:red;
}
textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:red;
}
textarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:red;
}
textarea:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:red;
}
</style>
2、文本框字数限制
<div id = "d1">
<div>
<input type="text" placeholder='的奇偶为不让你'/>
<textarea placeholder='减肥的设计费我没如风达'/>
</div>
<div class="limit">
最大可输入
<span></span>/
</div>
</div>
<script type="text/javascript">
//先定义计算字符串字数
function getStrleng(str,max) {
myLen = ;
i = ;
for (; (i < str.length) && (myLen <= max * ); i++) {
if (str.charCodeAt(i) > && str.charCodeAt(i) < ) //根据Unicode编码值判断是否汉字
myLen++;
else
myLen += ;
}
return myLen;
}
//定义函数获得DOM元素
function Q(s){
return document.querySelector(s);
}
//定义函数显示写了几个字
function checkWord(c) {
var maxstrlen = ;
var str = c.value; //对象的内容
myLen = getStrleng(str,maxstrlen); //计算str的字符个数
var wck = Q(".limit span");
console.log(wck)
if(myLen > maxstrlen * ){
c.value = str.substring(, i - );
}else{
wck.innerHTML = Math.floor(myLen / );
}
}
Q('textarea').onkeyup =function(){
checkWord(this);
}
</script>
修改input和textarea的placeholder的颜色,限制文本框字数输入的更多相关文章
- HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式
HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式 兼容性代码: input::-webkit-input ...
- input和textarea标签的select()方法----选中文本框中的所有文本
JavaScript select()方法选中文本框中的所有文本 <input>和<textarea>两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本 ...
- html5 textarea 文本框根据输入内容自适应高度
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 文本框限制输入类型<input>的输入框
最近在开发完一个项目后,又测试人员测试bug,然后我根据他们测试出来的bug一个一个的改,然后就遇到了一个问题,文本框是用来搜索,但是,比如这个文本框是用来搜索年龄的区间,输入条件的时候,如果输入了非 ...
- 如何限制textarea文本框的输入字数
代码实例如下: <!doctype html><html><head><meta charset="UTF-8"><title ...
- Jquery实现 TextArea 文本框根据输入内容自动适应高度
原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...
- 修改placeholder提示内容的颜色以及文本框输入文字内容的颜色
一般表单文本框提示信息:placeholder=" ",默认颜色是灰色的,输入文本信息也是默认为黑色的,如图所示: 修改placeholder提示内容的颜色关键代码及实现: 实现输 ...
- input文本框只能输入数字
HTML中的input文本框有时候需要数字的做输入检查,如果能做输入之前限定只能输入数字的话,就可以省去在提交时候的输入内容检查了. 下面是自己在火狐浏览器上调试出的实现,实现原理就是在键盘事件(on ...
- 修改input标签中的placeholder样式
input::-webkit-input-placeholder { color: #fff !important; } input:-moz-placeholder { color: #fff !i ...
随机推荐
- jQuery使用(九):队列及实现原理、基于队列模拟实现animate()
开篇一张图之队列模型 queue()如何使用? queue()原理实现? 基于queue()模拟实现animate() 一.使用queuer方法.理解队列原理 queue() dequeue() cl ...
- SPFA+SLF+LLL
关于SLF优化 朴素SPFA使用常规队列(FIFO)更新距离,并没有考虑优化出队顺序(dis值小的优先出队)可以在一开始就把各个点的dis值限值小,从而避免大量的松弛操作,从而提高效率.这就是SLF( ...
- 第十节:数据批注(DataAnnotationModel)和自定义验证(包括Model级别的验证)
一. 简介 写完上一个章节MVC中的常用特性,迫不及待将该系列补全,该章节主要介绍数据批注(也叫:注解). 一听[数据批注],好高大上的名字,但仔细一看,它们其实是[System.ComponentM ...
- clam简单使用
clam简单使用: 0,首先,要全局安装Nodejs,不再赘述.clam依赖node使用 1,打开 cmd 2,全局安装clam:npm -g install clam 3,切换到目的盘下,新建一个空 ...
- Hive_1
Sqoop实现Hbase和关系型数据库的数据互导 Zookeeper 配置的更新,文件的命名 Hive是建立在Hadoop之上为了减少MapReduce jobs编写工作的批处理系统,HBase是为了 ...
- linux文件系统初始化过程(4)---加载initrd(中)
一.目的 上文详细介绍了CPIO格式的initrd文件,本文从源代码角度分析加载并解析initrd文件的过程. initrd文件和linux内核一般存储在磁盘空间中,在系统启动阶段由bootload负 ...
- percona-toolkit 之 【pt-online-schema-change】说明【转】
背景: MySQL 大字段的DDL操作:加减字段.索引.修改字段属性等,在5.1之前都是非常耗时耗力的,特别是会对MySQL服务产生影响.在5.1之后随着Plugin Innodb的出现在线加索引的提 ...
- 史上最明白的 NULL、0、nullptr 区别分析(老师讲N篇都没讲明白的东东),今天终于明白了,如果和我一样以前不明白的可以好好的看看...
C的NULL 在C语言中,我们使用NULL表示空指针,也就是我们可以写如下代码: int *i = NULL; foo_t *f = NULL; 实际上在C语言中,NULL通常被定义为如下: #def ...
- Android Camera MSM HAL
高通新的camera驱动架构设计发生了一些变化,借用互联网上常用的一种结构,大致的原理如此:将camera的所有功能划分为不同的模块,让模块自己来决定自己的事情(高内聚,低耦合),模块需要有统一的接口 ...
- 【原创】Java基础之常用JVM工具
查看当前所有java进程 # jps 查看某个进程的堆内存占用情况 # jmap -heap $pid 查看某个进程的堆内存中对象分布情况 # jmap -histo $pid 将某个进程的堆内存导出 ...