input元素根据输入内容自动适应宽度参考代码
当前位置：点晴教程→知识管理交流
→『 技术文档交流 』
 ：input元素根据输入内容自动适应宽度参考代码
参考代码如下: <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <title>input宽度自适应</title> <style> body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
#my-input { width: 20px; padding: 0; font-size: 16px; font-family: Arial, Helvetica, sans-serif; } #my-span { position: absolute; left: 0; visibility: hidden; } </style> </head> <body> <!-- 思路：将文字内容赋值给隐藏的span，然后将input的宽度设置为span的宽度 --> <span id="my-span"></span> <input type="text" id="my-input" oninput="changeWidth()"> <script> function changeWidth() { var mySpan = $("#my-span"); var myInput = $("#my-input"); mySpan.html(myInput.val()); //给span赋值 if (mySpan.width() > 20) { myInput.css('width', mySpan.width()); } } </script> </body> </html> 该文章在 2023/3/27 16:22:40 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
