<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. SpringBoot项目@RestController使用 redirect 重定向无效

    Spring MVC项目中页面重定向一般使用return "redirect:/other/controller/";即可. 而Spring Boot当我们使用了@RestCont ...

  2. JSON三种数据解析方法(转)

    原 JSON三种数据解析方法 2018年01月15日 13:05:01 zhoujiang2012 阅读数:7896    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...

  3. 单例模式的七种实现-Singleton(Java实现)

    1. 饿汉式 实现代码: public class Singleton { private Singleton() { } private static Singleton singleton = n ...

  4. DirectX11 With Windows SDK--21 鼠标拾取

    前言 拾取是一项非常重要的技术,不论是电脑上用鼠标操作,还是手机的触屏操作,只要涉及到UI控件的选取则必然要用到该项技术.除此之外,一些类似魔兽争霸3.星际争霸2这样的3D即时战略游戏也需要通过拾取技 ...

  5. JavaScript null和undefined的区别

    前言 1995年javascript诞生时,最初像Java一样,只设置了null作为表示"无"的值.根据C语言的传统,null被设计成可以自动转为0 但是,javascript的设 ...

  6. [Luogu P1516]青蛙的约会

    按照题意,显然可以列出同余方程,k即为所求天数,再将其化为不定方程 ,那么对这个方程用扩展欧几里德算法即可得出k,q的一组解,但是方程有解的充要条件是(m – n) 和L不同时为零并且x – y是m ...

  7. LATEX简易教程

    1.LaTeX软件的安装和使用方法A(自助):在MikTeX的官网下载免费的MikTeX编译包并安装.下载WinEdt(收费)或TexMaker(免费)等编辑界面软件并安装.方法B(打包):在ctex ...

  8. 新加坡100M带宽,国内延迟70ms,仅800元

    ▇ 新加坡100M带宽,延迟80msE3_8G_1TB_100M_5IP_800元促:E3_32G_1TB SSD_1200元 ▇ 马来西亚,独享带宽,延迟70msL5630_16G_1TB_15M_ ...

  9. Leetcode#521. Longest Uncommon Subsequence I(最长特殊序列 Ⅰ)

    题目描述 给定两个字符串,你需要从这两个字符串中找出最长的特殊序列.最长特殊序列定义如下:该序列为某字符串独有的最长子序列(即不能是其他字符串的子序列). 子序列可以通过删去字符串中的某些字符实现,但 ...

  10. TortoiseGit与GIt生成ssh秘钥添加到github账号的简单方法!简单使用

    今天升级了自己电脑上的git与TortoiseGit,全部换成了最新版,后来不知道怎么的git的秘钥还能使用,可以直接拉取或者提交ssh地址克隆的代码,可是小乌龟客户端就悲剧了 公司的项目有key.p ...