This time through this personalized input box, to introduce you to some easy to ignore knowledge points. (Novice note: The HTML of this article uses Jade, CSS uses SASS, JS uses VUE)

A, effects,

We take a look at the effect of the dynamic map, think about a wave, with your thinking to see the next content, maybe a little better effect.





image

Demo address on the PC

Second, the demand for

When we start to build something, we must first analyze its requirements:

  • When the input box gets the focus, the prompt text moves up and the line below generates animation;
  • When the input box loses focus and is not filled in, the prompt text and lines are restored to their previous state.
  • When the input box loses focus, the state does not change when filling in the content.

Three, the structure

The first step is to determine the structure of the HTML:

div.item
    input(type="text" name="card" id="card" placeholder="Identity card" v-card="" maxlength="18")
    label(for="card") Card
    div.focuslineCopy the code

The only regret here is that input does not support pseudo-elements (::after, ::before), so an extra div had to be used. As a bonus, maxLength can only be used if the input type is password or text, so don’t ask why maxLength doesn’t work.

Four, performance

In fact, for the above to achieve the effect, we can completely control through JS, but has been emphasizing the performance (CSS) and behavior (JS) separation, so we completely through the characteristics of CSS to solve the performance of the problem, more perfect. But not all CSS properties are supported by browsers (which is embarrassing). Here are a few features I’m going to use that you might want to experiment with in Chrome.

In fact, requirement 1 and Requirement 2 are the same requirement, which can be solved by pseudo class Focus and transition attribute.

    input:focus + label {
        color: rgb,97,107 (82);transform: translate(10px, 0) scale(. 9); }input:focus ~ div {
        width: 100%;
    }Copy the code

For the third requirement, we’re going to need something new. The first one is placeholder (placeholder classes use:), and we’re going to hide the placeholder so that we can display our label:

    input {
      &:placeholder {
          opacity: 0; }}Copy the code

We know that the placeholder will no longer display when the text is input, so there is a placeholder class named placeholder-shown:

    input:not(:placeholder-shown) + label {
      color: rgb,97,107 (82);transform: translate(10px, 0) scale(. 9); }input:not(:placeholder-shown) ~ div {
      width: 100%;
    }Copy the code

Five, behavior,

Here I also nagging, from the above can be seen that this is an ID card input box, we know that the ID card is composed of numbers and letters, and the letter only appears in the 18th place, and only the letter X. So I used the input box of text type above, in order to let the user input well, there will be several problems:

  • Problems when switching to Chinese input method;
  • Copy and paste problems;
  • Processing of other illegal characters entered.

Here we mainly through input, compositionStart, compositionEnd, paste four events to resolve.

    let legalContent, // Start the input before the input method
        LOCK = false; // Whether to enable Chinese input method
    el.addEventListener('compositionstart', (e) => {
      / * * * -- -- -- -- -- -- -- -- -- -- -- -- -- - * * open Chinese input methods -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
      legalContent = e.target.value; // Save the contents before the Chinese input method
      LOCK = true; / / plus the lock
    }, false);

    el.addEventListener('compositionend', (e) => {
      / * * * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * * end of Chinese input methods -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
      e.target.value = legalContent;
      LOCK = false; / / unlock
    }, false);


    el.addEventListener('input', (e) => {
      const len = e.target.value.length;

      /** * When the ID card number is less than 18 digits, only digits and letters can be entered */
      if(! LOCK) {if (len <= 17) {
          e.target.value = e.target.value.replace(/\D/,' ');
        } else {
          e.target.value = e.target.value.replace(/[^09 -Xx]/,' '); }}},false);


    el.addEventListener('paste', (e) => {
      /** * ---------- * paste * ---------- */
      e.preventDefault();  // Block the default event
    }, false);Copy the code

If you feel good about it, please pay attention to it. Your attention is my motivation to write. More article simple book source: GitHub