1. <style type="text/css">
  2. textarea{
  3. width: 400px;
  4. height:400px;
  5. resize: none;
  6. }
  7. .limit{
  8. width: 400px;
  9. text-align: right;
  10. }
  11. #d1{
  12. margin: 100px;
  13. }
  14. input::-webkit-input-placeholder{
  15. color:red;
  16. }
  17. input::-moz-placeholder{ /* Mozilla Firefox 19+ */
  18. color:red;
  19. }
  20. input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
  21. color:red;
  22. }
  23. input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
  24. color:red;
  25. }
  26. textarea::-webkit-input-placeholder{
  27. color:red;
  28. }
  29. textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */
  30. color:red;
  31. }
  32. textarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
  33. color:red;
  34. }
  35. textarea:-ms-input-placeholder{ /* Internet Explorer 10-11 */
  36. color:red;
  37. }
  38. </style>

2、文本框字数限制

  1. <div id = "d1">
  2. <div>
  3. <input type="text" placeholder='的奇偶为不让你'/>
  4. <textarea placeholder='减肥的设计费我没如风达'/>
  5. </div>
  6. <div class="limit">
  7. 最大可输入
  8. <span></span>/
  9. </div>
  10. </div>
  11. <script type="text/javascript">
  12. //先定义计算字符串字数
  13. function getStrleng(str,max) {
  14. myLen = ;
  15. i = ;
  16. for (; (i < str.length) && (myLen <= max * ); i++) {
  17. if (str.charCodeAt(i) > && str.charCodeAt(i) < ) //根据Unicode编码值判断是否汉字
  18. myLen++;
  19. else
  20. myLen += ;
  21. }
  22. return myLen;
  23. }
  24. //定义函数获得DOM元素
  25. function Q(s){
  26. return document.querySelector(s);
  27. }
  28. //定义函数显示写了几个字
  29. function checkWord(c) {
  30. var maxstrlen = ;
  31. var str = c.value; //对象的内容
  32. myLen = getStrleng(str,maxstrlen); //计算str的字符个数
  33. var wck = Q(".limit span");
  34. console.log(wck)
  35. if(myLen > maxstrlen * ){
  36. c.value = str.substring(, i - );
  37. }else{
  38. wck.innerHTML = Math.floor(myLen / );
  39. }
  40. }
  41. Q('textarea').onkeyup =function(){
  42. checkWord(this);
  43. }
  44. </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. Spotlight--你不得不用的Mac查询利器

    世界上有两种Mac用户:一种是经常使用Spotlight的,另一种是忽略Spotlight的.如果你是第二种用户,那么你需要改变.Mac所有方面的使用场景,都会随着Spotlight而变得更快.你只需 ...

  2. 爬虫案例之Pubmed数据库下载

    代码 # encoding=utf-8 import os, time, re import urllib.request import urllib.parse import ssl ssl._cr ...

  3. 金融量化分析【day111】:Matplotib-图标标注

    一.图像标注 1.股票 df = pd.read_csv('601318.csv') df.plot() plt.plot([1,3,4,5]) plt.plot([5,8,7,9]) plt.tit ...

  4. CSS+HTML+JQuery实现条形图

    在工作中遇到了写条形图的情况,因为文字,条形数量和条形图的颜色需要改变,所以不能用图片,所以决定写一个试试,写的比较简单,但毕竟是第一次,也遇到了一些问题,特意记录下来,以免忘记. 因为该页面还需要兼 ...

  5. 大家都知道fastclick能解决300ms延迟,现在我们来看一下,使用方法

    1.在终端输入以下命令进行安装 npm install fastclick -S 2.在你用脚手架搭建好的项目中,找到mian.js这个入口文件,打开 3.在其中加入: import FastClic ...

  6. secureCRT免密码登陆Linux

    转自:http://blog.csdn.net/wangquannetwork/article/details/46062675 1.实现原理: 通过CRT生成的密钥对,把公钥上传到Linux服务器指 ...

  7. Leetcode#191. Number of 1 Bits(位1的个数)

    题目描述 编写一个函数,输入是一个无符号整数,返回其二进制表达式中数字位数为 '1' 的个数(也被称为汉明重量). 示例 : 输入: 11 输出: 3 解释: 整数 11 的二进制表示为 000000 ...

  8. django drf 基础学习4

    0  简介:介绍ModelViewSet基本使用规则1 views引用以及初始化   from rest_framework.viewsets import ModelViewSet     clas ...

  9. mysql 备份报错mysqldump: [Warning] Using a password on the command line interface can be insecure.

    -------------------------------------------------------------------------------- mysql 备份报错mysqldump ...

  10. MVC中一般为什么用IQueryable而不是用IList?

    IList(IList<T>)会立即在内存里创建持久数据,这就没有实现“延期执行(deferred execution)”,如果被加载的实体有关联实体(associations),此关联实 ...