“This is the first day of my participation in the August Gwen Challenge. For details, see: August Gwen Challenge juejin.cn/post/698796…

This is the first chapter in a series of “CSS Ideas” that will continue to be updated

You’ll have your own ideas for CSS

Fun, use, is king

Stop talking and just do it!

I’m not really an input box, I’m just a div

If you often develop mobile terminals, you may have encountered this problem:

  • Product manager: The input keyboard of the system is too ugly. Can we implement one ourselves?
  • Me: This is not easy, completely oh k

In an hour ~~

I’m sitting in front of my computer sweating, thinking:

“Do I write my resignation or do I wait for him to fire me? That’s the question.”

Why?

Because originally a seemingly simple demand, almost overturned in the gutter

Fortunately, cleverness and resourcefulness finally completed the task on schedule in two hours

The solution

Once input gets focus, it directly invokes the system keyboard on mobile devices

Like this

I can’t even stop it

What to do with that

Disable it and add click events

Input Adds the disabled attribute

// index.html
<input type="text" disabled="disabled" >
Copy the code

Parent element and add click events

Why add a parent? It’s not because the event is invalidated when input is disabled

// html <div class="input_parent" onclick="onInputClick()"> <input type="text" disabled="disabled" > </div> <div Class ="keys"> custom keyboard </div> // script function onInputClick() document.getElementsByClassName('keys')[0].style.display = 'flex' }Copy the code

The effect

It could be it could be, but

The cursor? Is it an input field without a cursor?

It certainly doesn’t count

All right, go back and rebuild it

Instead of input, we’ll use the all-purpose div + pseudo-class element :after

The first step

A div, a: After, and a little animation

// html <div class="input"></div> // style .input{ min-height: 2rem; width: 15rem; font-size: 2rem; Border: 0.1 rem solid # 8 a8a8a; Padding: 0.5 rem; } .input::after{ content:'|'; color: #8A8A8A; Animation: 1.5 s linear infinite cursor; } @keyframes cursor{ 0%{ opacity: 1; } 50%{ opacity: 0; } 100%{ opacity: 1; }}Copy the code

See the effect

Let’s add event logic and see what happens

The last

The complete code

<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <title></title> </head> <style> body{ display: flex; height: 100vh; width: 100vw; overflow: hidden; } .box{ margin: auto; } .input{ min-height: 2rem; width: 15rem; font-size: 2rem; Border: 0.1 rem solid # 8 a8a8a; Padding: 0.5 rem; } .input::after{ content:'|'; color: #8A8A8A; Animation: 1.5 s linear infinite cursor; } @keyframes cursor{ 0%{ opacity: 1; } 50%{ opacity: 0; } 100%{ opacity: 1; } } .keys{ position: fixed; height: 30vh; bottom: 0; left: 0; right: 0; display: none; justify-content: center; align-items: center; background: #8a8a8a; box-sizing: border-box; flex-wrap: wrap; } .keys_item{ width: calc(100% / 2 - 2rem); height: calc(100% / 3 - 1rem); Margin: 0.1 rem; background: indianred; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 2rem; } . </style> <body> <div class="box"> <div class="input" onclick="onInputClick()"> </div> </div> <div class="keys"> <div  class="keys_item" onclick="onKeyClick(1)">1</div> <div class="keys_item" onclick="onKeyClick(2)">2</div> <div class="keys_item" onclick="onKeyClick(3)">3</div> <div class="keys_item" onclick="onKeyClick(4)">4</div> <div class="keys_item" onclick="onKeyClick(5)">5</div> <div class="keys_item" onclick="onKeyClick(6)">6</div> </div> </body> </ HTML > <script type="text/javascript"> function onInputClick() {// Set custom keyboard document.getElementsByClassName('keys')[0].style.display = 'flex' } function onKeyClick(number) { const n_input = document.getElementsByClassName('input')[0]; n_input.textContent += number } </script>Copy the code