輸入內容後input控制項的位置改變

2021-08-08 21:12:27 字數 491 閱讀 7584

輸入內容後input控制項的位置改變,寫了挺久的前端**,不知道為什麼之前沒有遇到這個問題。既然遇到了,那麼就在這裡總結一下經驗,遇到這個問題,是我在做乙個搜尋框的時候,下面是我解決的**。

input

input

:hover

input

:hover

為什麼會輸入內容後input控制項的位置改變?

答:當我們使用偽類的時候,並且設定邊框為1px的時候,左邊和上邊(顏色為深灰色的邊框)寬度變成1個畫素的時候,右邊框和下邊框就需要貼上去。這時候寬度和高就少了2個畫素。我們看上去就是右邊框和下邊框向上移動了。說到這裡,我們又發現乙個解決的方法,那就是在偽類中修改input控制項的寬高,這樣也可以實現。

input

input

:hover

注意:如果不使用偽類是不會出現這樣的問題的。

js正則限制input輸入內容

1.文字框只能輸入數字 小數點也不能輸入 2.只能輸入數字,能輸小數點.3.數字和小數點方法二 4.只能輸入字母和漢字 5.只能輸入英文本母和數字,不能輸入中文 6.只能輸入數字和英文chun 7.小數點後只能有最多兩位 數字,中文都可輸入 不能輸入字母和運算符號 57 event.keycode ...

js的input框限制輸入內容

想限制輸入內容,於是找了這樣乙個blog,記錄一下.js 控制文字框只能輸入數字 input nkeyup value value.replace 0 9 g,npaste value value.replace 0 9 g,oncontextmenu value value.replace 0 9...

input框禁止顯示歷史輸入內容

input框預設是會記錄操作者的歷史輸入內容的,這固然會方便大家操作,但在一些敏感場景下,這會洩漏使用者的部分資訊。我們找到input的部分介紹 清除input輸入框的歷史記錄,即在input中加入 autocomplete off 即可 autocomplete 屬性規定輸入字段是否應該啟用自動完...