[关闭]
@YDS 2017-07-29T13:23:21.000000Z 字数 2404 阅读 381

蜜汁textarea

js

使textarea可以达到具有默认提示文字，且当用户输入文字时提示文字自动删除，并且由提示文字的字体颜色浅灰色变为正常的输入文字黑色，可通过js实现。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.     <title>title</title>
  9.     <style>
  10.         #textarea{
  11.              overflow:hidden;
  12.             margin-top:2rem;
  13.             margin-left:0.5rem;
  14.             height:10rem;
  15.             width:95%;
  16.             outline: none;
  17.             border:0;
  18.             background:#f9f9f9;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.         <textarea  id="textarea" placeholder="添加作品描述，如：塔米APP的iOS主开发工程师，负责整体架构设计..."></textarea>  
  25. </body>
  26. <script type="text/javascript" src="../script/api.js"></script>
  27. <script type="text/javascript">
  28.     apiready = function(){
  30.     };
  31.     var autoTextarea = function (elem, extra, maxHeight) {
  32.         extra = extra || 0;
  33.         var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
  34.         isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
  35.                 addEvent = function (type, callback) {
  36.                         elem.addEventListener ?
  37.                                 elem.addEventListener(type, callback, false) :
  38.                                 elem.attachEvent('on' + type, callback);
  39.                 },
  40.                 getStyle = elem.currentStyle ? function (name) {
  41.                         var val = elem.currentStyle[name];
  42.                         if (name === 'height' && val.search(/px/i) !== 1) {
  43.                                 var rect = elem.getBoundingClientRect();
  44.                                 return rect.bottom - rect.top -
  45.                                         parseFloat(getStyle('paddingTop')) -
  46.                                         parseFloat(getStyle('paddingBottom')) + 'px';        
  47.                         };
  48.                 return val;
  49.                 } : function (name) {
  50.                 return getComputedStyle(elem, null)[name];
  51.                 },
  52.                 minHeight = parseFloat(getStyle('height'));
  53.                 elem.style.resize = 'none';
  54.                 var change = function () {
  55.                 var scrollTop, height,
  56.                         padding = 0,
  57.                         style = elem.style;
  59.                 if (elem._length === elem.value.length) return;
  60.                 elem._length = elem.value.length;
  62.                 if (!isFirefox && !isOpera) {
  63.                         padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
  64.                 };
  65.                 scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  67.                 elem.style.height = minHeight + 'px';
  68.                 if (elem.scrollHeight > minHeight) {
  69.                         if (maxHeight && elem.scrollHeight > maxHeight) {
  70.                                 height = maxHeight - padding;
  71.                                 style.overflowY = 'auto';
  72.                         } else {
  73.                                 height = elem.scrollHeight - padding;
  74.                                 style.overflowY = 'hidden';
  75.                         };
  76.                         style.height = height + extra + 'px';
  77.                         scrollTop += parseInt(style.height) - elem.currHeight;
  78.                         document.body.scrollTop = scrollTop;
  79.                         document.documentElement.scrollTop = scrollTop;
  80.                         elem.currHeight = parseInt(style.height);
  81.                 };
  82.         };
  83.         addEvent('propertychange', change);
  84.         addEvent('input', change);
  85.         addEvent('focus', change);
  86.         change();
  87. };
  89. </script>
  90. <script type="text/javascript">
  91.     var text=document.getElementById("textarea");
  92.     autoTextarea(text);//调用
  93. </script>
  94. </html>
  95. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注