Javascript tips for text box and hidden layer display and shadow when a blank area is clicked

When the text box gets the focus, a floating layer is displayed below the text box. Click the text box to hide the floating layer. The following describes how to solve the problem between the text box and the hidden layer when you click the mouse, if you are interested, you can refer to the following section to display a floating layer under the text box when you get the focus.

To hide the floating layer, click the blank area of the webpage except the text box and floating layer.

When a user clicks the floating layer, the value of the text box is changed.

The Code is as follows: