修改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 ...
随机推荐
- 微服务之服务中心—Eureka
Eureka 简介Eureka 是 Spring Cloud Netflix 的一个子模块,也是核心模块之一,用于云端服务发现,是一个基于 REST 的服务,用于定位服务,以实现云端中间层服务发现和故 ...
- Java IO流操作汇总: inputStream 和 outputStream【转】
我们在进行Android java 开发的时候,经常会遇到各种IO流操作.IO流操作一般分为两类:字符流和字节流.以“Reader”结尾都是字符流,操作的都是字符型的数据:以“Stream”结尾的都是 ...
- JN_0002:Win10禁止U盘拷贝文件的方法
1,在电脑桌面使用快捷键win键+r唤出运行窗口,在搜索框中输入gpedit.msc,然后点击确定. 2,打开的本地组策略编辑器中依次点击展开计算机配置—管理模块—系统,在系统下找到并选中可移动存储访 ...
- 网站设置ico图标
1.用设计的png图片去在线图标网站上生成一个16*16大小的图标,命名favcon.ico放置到网站根目录下如:http://www.faviconico.org/favicon2.添加代码 < ...
- npm cnpm yarn
npm 如何下载指定版本的组件 先确保文件目录下含有 package.json 文件, 没有的话,可以通过 npm init 创建, 然后只需要在组件的后面加上 @2.8.1 版本号即可, 例如:re ...
- C++ 在类里面使用多线程技术
参考链接: https://blog.csdn.net/jmh1996/article/details/72235232 说明: C++的每个成员函数都会有一定转化, 而static 则不会 ...
- css3之border-radius理解
在日常项目过程中,border-radius这个属性算是非常常用的属性之一了,通过设置元素的border-radius值,可以轻松给元素设置圆角边框,甚至实现绘制圆.半圆.四分之一的圆等各种圆角图形. ...
- Android屏幕旋转
一个手机最基本的旋转方向有上面4种,而在Android开发中,涉及到屏幕旋转的地方很多,而且各个函数给出的角度值都不一样,比如 Activity的getRotate,Camera的setDisplay ...
- Xshell出现‘The remote SSH server rejected X11 forwarding request’解决办法
当准备用Xshell进行远程连接的时候出现下面的情况: 那么跟着我来点击鼠标就ojbk了: 文件--->属性--->隧道 然后找打 把那个单选框的对号勾掉,然后点击确认就OK了!!
- Python-Django 视图层
1 request对象 method:请求方式 GET:get请求的参数(post请求,也可以携带参数) POST:post请求的参数(本质是从bdoy中取出来,放到里面了) COOKIES---&g ...