Question

我遵循此example。我试图替换div来输入并更改一些CSS

这里是my code pen。您会看到文本无法对齐。

完整代码在这里

<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Anonymous+Pro"
      rel="stylesheet"
    />

    <style>
      /* editable */
      .kb-editable {
        /* size 1 */
        width: 200px;
        /* size 2 */
        height: 30px;
        /* bg with bg color var */
        background: #d3d3d3;
        /* related then abs */
        position: relative;
        /* left to right align */
        align-items: start;
        /* same font */
        font-family: "Anonymous Pro", monospace;
        /* font size */
        font-size: 14px;
        /* y overflow */
        overflow-y: auto;
        /* inline */
        display: inline-block;
        /* text cursor */
        cursor: text;
        border: 1px solid transparent;
        padding: 5px;
      }

      /* editable div */
      .kb-editable input[type="text"] {
        font-family: inherit;

        /* posi inside abs */
        position: relative;
        /* z-index 2 */
        z-index: 2;
        /* bg color: white */
        background: transparent;
        /* text color black */
        color: black;
        /* no outline */
        outline: none;
        /* max width */
        max-width: 100%;
        /* max height */
        max-height: 100%;
        /* inline display */
        display: inline-block;
        /* deal with long words (break them to multiple lines), wrap words */
        word-wrap: break-word;
      }

      /* container placeholder */
      .kb-editable .kb-placeholder {
        /* placeholder posi abs */
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 5px;
        right: 5px;
        color: grey;
      }

      /* used for non-chrome to hide original caret on empty state */

      /* can edit, focus, empty */
      input[type="text"]:focus:empty {
        /* color transparent */
        color: transparent;
        /* text shodow black */
        text-shadow: 0 0 0 black;
      }

      /* caret */
      .kb-editable:not(.kb-edge)
        /* can edit, focus, empty */
        input[type="text"]:focus:empty
        /* ~ anything after, place holder before */
        ~ .kb-placeholder:before {
        /* content */
        content: "|";
        /* text color */
        color: black;
        /* abs */
        position: absolute;
        top: 0;
        left: 0;
        /* caret */
        animation: 1s blink step-end infinite;
        caret-color: transparent;
      }

      /* blink used above */
      @keyframes blink {
        from,
        to {
          color: transparent;
        }
        50% {
          color: black;
        }
      }
    </style>
  </head>
  <body>
    <!-- editable class, onclick, focus black -->
    <div class="kb-editable" onclick="getFocus('black')">
      <!-- font -->
      <input type="text" id="black" />
      <!-- back -->
      <span class="kb-placeholder">DD/MM/YYYY</span>
    </div>
  </body>
  <script>
    // Get IE or Edge browser version
    var isIEOrEdge = detectIE();

    // it is ie
    if (isIEOrEdge) {
      let editables = document.querySelectorAll(".kb-editable");

      for (let i = 0; i < editables.length; i++) {
        editables[i].classList.add("kb-edge");
      }
    }

    // doc.getId, focus
    // this is the only function that is actually needed if the double IE\Edge caret doesn't bother you
    function getFocus(id) {
      document.getElementById(id).focus();
    }

    /* VERY OPTIONAL :-) */
    /**
     * detect IE
     * returns version of IE or false, if browser is not Internet Explorer
     */
    function detectIE() {
      var ua = window.navigator.userAgent;

      // Test values; Uncomment to check result …

      // IE 10
      // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';

      // IE 11
      // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';

      // Edge 12 (Spartan)
      // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';

      // Edge 13
      // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

      var msie = ua.indexOf("MSIE ");
      if (msie > 0) {
        // IE 10 or older => return version number
        return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)), 10);
      }

      var trident = ua.indexOf("Trident/");
      if (trident > 0) {
        // IE 11 => return version number
        var rv = ua.indexOf("rv:");
        return parseInt(ua.substring(rv + 3, ua.indexOf(".", rv)), 10);
      }

      var edge = ua.indexOf("Edge/");
      if (edge > 0) {
        // Edge (IE 12+) => return version number
        return parseInt(ua.substring(edge + 5, ua.indexOf(".", edge)), 10);
      }

      // other browser
      return false;
    }
  </script>
</html>

逐个字符消失的占位符，请改用输入

0 个答案: