<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的颜色,限制文本框字数输入的更多相关文章

  1. HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式

    HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式  兼容性代码: input::-webkit-input ...

  2. input和textarea标签的select()方法----选中文本框中的所有文本

    JavaScript select()方法选中文本框中的所有文本 <input>和<textarea>两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本 ...

  3. html5 textarea 文本框根据输入内容自适应高度

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 文本框限制输入类型<input>的输入框

    最近在开发完一个项目后,又测试人员测试bug,然后我根据他们测试出来的bug一个一个的改,然后就遇到了一个问题,文本框是用来搜索,但是,比如这个文本框是用来搜索年龄的区间,输入条件的时候,如果输入了非 ...

  5. 如何限制textarea文本框的输入字数

    代码实例如下: <!doctype html><html><head><meta charset="UTF-8"><title ...

  6. Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  7. 修改placeholder提示内容的颜色以及文本框输入文字内容的颜色

    一般表单文本框提示信息:placeholder=" ",默认颜色是灰色的,输入文本信息也是默认为黑色的,如图所示: 修改placeholder提示内容的颜色关键代码及实现: 实现输 ...

  8. input文本框只能输入数字

    HTML中的input文本框有时候需要数字的做输入检查,如果能做输入之前限定只能输入数字的话,就可以省去在提交时候的输入内容检查了. 下面是自己在火狐浏览器上调试出的实现,实现原理就是在键盘事件(on ...

  9. 修改input标签中的placeholder样式

    input::-webkit-input-placeholder { color: #fff !important; } input:-moz-placeholder { color: #fff !i ...

随机推荐

  1. Kubernetes之服务发现及负载Services

    Service 概述 kubernetes 中的pod是有生生灭灭的,时刻都有可能被新的pod所代替,而不可复活(pod的生命周期).一旦一个pod生命终止,通过ReplicaSets动态创建和销毁p ...

  2. Entity Framework入门教程(10)---离线场景保存和删除实体/实体图集

    离线场景保存和删除实体/实体图集 这一节的内容是在离线场景中保存实体和实体图集 在离线场景中,当我们保存一个离线的实体图集或一个单独的离线实体时,我们需要做两件事.首先,我们要把实体附加到新的上下文中 ...

  3. 第十三节:实际开发中使用最多的监视锁Monitor、lock语法糖的扩展、混合锁的使用(ManualResetEvent、SemaphoreSlim、ReaderWriterLockSlim)

    一. 监视锁(Monitor和lock) 1. Monitor类,限定线程个数的一把锁,两个核心方法: Enter:锁住某个资源. Exit:退出某一个资源. 测试案例:开启5个线程同时对一个变量进行 ...

  4. 液晶流在齐次 Besov 空间中的正则性准则

    在 [Zhang, Zujin. Regularity criteria for the three dimensional Ericksen–Leslie system in homogeneous ...

  5. metasploit 教程之信息收集

    信息收集 信息收集范围很大,可以从不同层面,不同维度进行信息收集. 系统补丁 我们知道目标机器缺少什么补丁就意味着存在与其对应的漏洞.我们可以利用这些漏洞来达到我们渗透攻击的目的. # 使用的模块 u ...

  6. dense prediction问题

    dense prediction  理解:标注出图像中每个像素点的对象类别,要求不但给出具体目标的位置,还要描绘物体的边界,如图像分割.语义分割.边缘检测等等. 基于深度学习主要的做法有两种: 基于图 ...

  7. 可变与不可变类型数据,列表的copy方法

    我们先来了解一下可变与不可变类型的数据 (1)可变类型:列表,字典(内存中的数据允许被修改) 不可变类型:数字,字符串,元组(内存中的数据不允许被修改) 接着我们通过一个实例来看一看可变与不可变类型数 ...

  8. python 列表 元组 字典 集合

    列表 lst = [i for i in range(10)] 切片 # 把下标小于2的显示出来 print(lst[:2]) # 把10个数有大到小输出 print(lst[::-1]) # 把下标 ...

  9. Ubuntu 16.04下安装MySQL及远程连接

    最近因为要研究一个关于MySQL的漏洞,所以需要MySQL的环境,就用了近一个小时的时间搭建了一个,期间出了点问题,故记录于此. 1.首先是安装,在命令窗口中输入下面三条命令即可. sudo apt- ...

  10. VOC2012数据集注解

    VOC2012官网介绍:http://host.robots.ox.ac.uk/pascal/VOC/voc2012/index.html 分割部分:参考博客:https://blog.csdn.ne ...