Some time ago, based on my research on next and GraphQL and my interest, I built a site, which serves as a test field for various technical twists and turns, practices and interests in the future.

Recently I need to use JWT to practice checksum functionality in my experimental field. The verification code refers to the verification code of the email or SMS during registration. In order to write more CSS, I decided to implement a Material Design form transition effect.

See the effect of poetry string song – login

Before you begin, see if you recognize any of the following selectors. If not, you can learn about the following selectors and their trial scenarios

  • :not(:empty)
  • input:not([value=""])
  • input:valid
  • input:not(:placeholder-shown)

Tech /post/login-…

Issue an overview

As for the effect of Material Design, it is shown above. To achieve the above effect, you can simply boil down the problem to the realization of the following two points

  1. When there is no value in the input and no focus is obtained, the Hint message is grayed out in the input box
  2. When the Input gets focus or has a value, the Hint message is animated over the input

Post the HTML and CSS code directly to accomplish simple functions first

Label is placed after input to facilitate positioning through the ~ and + selectors.

form
  .input-wrapper
    input[type="text"]
    label
  .input-wrapper
    input[type="password"]
    label
Copy the code

The CSS code is as follows: The label is initially placed in the input placeholder position by absolute positioning, and the CSS Selector of the label when the input gets focus is also easily determined by input:focus + label

label {
  /* Locate the input box */
  position: absolute;
  bottom: 10px;
  left: 0;
  font-size: 1.2 em;
  color: #ccc;
  transition: all ease 0.3 s;
  pointer-events: none;
}

input:focus + label {
  /* Positioned above the input */
  color: #f60;
  font-size: 0.8 em;
  transform: translateY(150%); }Copy the code

80% of the work was done in 20% of the time, and the remaining 20% of the problems are summarized below

  1. Unable to click input in the label text area because it is blocked by label
  2. Getting the focus of the CSS Selector is pretty simple, but there’s another complicationinputNon-null CSS Selector

The focus of

Pointer -events controls mouse click behavior. If clicking through label is implemented, set this property to None.

label {
  pointer-events: none;
}
Copy the code

input:not(:empty)

I conditionally thought of using this to match input values that are not empty. But I looked into the documentation, and it didn’t apply.

As described by empty-Pesudo Selectors

The :empty pseudo-class represents an element that has no children at all. In terms of the document tree, only element nodes and content nodes (such as DOM text nodes, CDATA nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness;

If an element has 0 children, it will match :empty. This has nothing to do with input value.

How do we get the number of children of element Element? Using element. The.childnodes. Length.

See StackOverflow: Not (:empty) CSS selector is not working?

input:not([value=””])

So, to be a little bit more blunt, just match the value of the property.

No. A display value in input is not equivalent to an attribute value.

Which brings us to the next question

How do I get the input value

Test it with the following code

<input type="text" id="input">
Copy the code
input.value / /"
input.getAttribute('value') // null

input.setAttribute('value'.4)
input.value // '4', value is synchronized
input.getAttribute('value') / / '4'

input.value = 3
input.value / / '3'
input.getAttribute('value') / / '4'
Copy the code

Conclusion:

  1. Input byinput.valueGets a value instead ofinput.getAttribute('value')
  2. ifinput.valueIs empty, then you can passinput.setAttribute('value', value)Sets the value and changes at the same timeinput.value
  3. If manuallyinput.valueAfter the assignment, is usedinput.setAttribute('value', value)invalid

Matching an input whose value is not empty can be better understood as matching an input whose value is null

This means that input:not([value=””]) cannot be used as a selector in a pure CSS implementation

Use js

The idea is simple: synchronize input.value to input.getAttribute(‘value’)

<input onkeyup="this.setAttribute('value', this.value);" />
Copy the code

Use the React

The controlled Input component sets the value of the input by manually controlling the value property.

Use the input:not([value=””]) selector to successfully control the transition effect of the input

React is also used in my project, and this selector can well meet my needs

input:valid

In HTML5, input type has the following new types

  • email
  • number
  • search
  • url
  • datetime
  • .

And added a way to check, such as whether it is necessary, regular and so on

  • Max /min: Indicates the maximum and minimum value
  • The pattern of regular
  • Required whether this parameter is mandatory

Here we introduce a new selector input:required, which matches all inputs with valid values

We can add a “required” flag to all input, in which case input:valid means matching input with a value

However, using input: VALID has some limitations, such as the following two

  1. All inputs must berequiredAnd the ones selected must also be usedrequired, lost the semantics, and the submission will be prompted not to submit normally
  2. Unable to use the verification of complex input such as Pattern and email

Verification prompt trigger time

After the Form submit event is triggered, the browser’s own verification prompt is raised

The form submit event trigger needs to meet the following two conditions

  1. The package is under the form
  2. Click on the form ofinput[type="submit"]orbuttoncommit

The two-point limitation of input:valid can be resolved by changing the form to div. In this case, there is no submit event and the optional item can be handled correctly. As for complex form verification, it is controlled by JS

input:not(:placeholder-shown)

The input will be a placeholder value, while the input will be a placeholder value, while the input will be a placeholder value.

The placeholder attribute can’t be empty, but you can set it to an empty string if you don’t have to

<input placeholder="" />
Copy the code

reference

  • Detect if an input has text in it using CSS — on a page I am visiting and do not control?

Pay attention to the public number shanyue line, here recorded my technical growth, welcome to exchange