<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. 关于QQ农场牧场等曾经流行的游戏的一些见解

    大概在上上周,我偶然间打开QQ空间玩了一会QQ农牧场,玩完之后我在想,在那个年代他们为什么那么红? 我觉得可能有以下几点: 1:凭借着QQ海量的用户,可以迅速推广 2:迎合了人们爱占小便宜的心理,不过 ...

  2. redis远程连接报错记录

    错误如下 redis可视化工具连接测试 telnet ip 6379 修改关键参数如下 #开通外网访问 # bind 127.0.0.1 #以后台方式运行 daemonize no #取消保护模式,保 ...

  3. java(8)二重循环

    一.二重循环 1.循环中,嵌套另外一个循环,将内层的循环,看成外层循环的一个循环操作 2.常见的二重循环 形式1:      外层while或do…while 内层为for循环 形式2: 外层.内层都 ...

  4. 非极大值抑制(NMS)

    转自:https://www.cnblogs.com/makefile/p/nms.html 概述 非极大值抑制(Non-Maximum Suppression,NMS),顾名思义就是抑制不是极大值的 ...

  5. Hough transform(霍夫变换)

    主要内容: 1.Hough变换的算法思想 2.直线检测 3.圆.椭圆检测 4.程序实现 一.Hough变换简介 Hough变换是图像处理中从图像中识别几何形状的基本方法之一.Hough变换的基本原理在 ...

  6. php7 + 新特性 部分

    三目运算符: 以前:$type = isset($_GET['type']) ? $_GET['type'] : '测试'; php7.0: $type = $_GET['type'] ?? '测试' ...

  7. Android Fragment 生命周期及其正确使用(建议使用自定义View替换Fragment)

    使用Fragment 官方例子中显示: 例如:一个学生Fragment,需要传入studentId,进行http请求显示,那么setArguments后防止杀掉Fragment后,参数为0,显示不了数 ...

  8. setTimeout 第三个参数秒懂

    好吧,假设你们都是从 ES6 里 promise 发现 setTimeout 还有第三个参数的,下面讲讲到底是干嘛的 setTimeout 第三个及之后的参数作用:定时器启动时候,第三个以后的参数是作 ...

  9. android开源框架讲解 一 butterknif

    2019年3月16日 12:49:38 一 直接进入主题 如何配置ButterKnif 我用的是AS3.1.2 应该跟版本关系不大 1.1 下载安装Android ButterKnif Zelezny ...

  10. Coverity代码扫描工具

    1.说明:Coverity代码扫描工具可以扫描java,C/C++等语言,可以和jenkins联动,不过就是要收钱,jenkins上的插件可以用,免费的,适用于小的java项目 2.这是Coverit ...