可编辑且宽度自适应input
2024-08-24 08:36:32
默认的input项是比较难看的,并且它的宽度还无法随着输入而变化,这样未免有些呆板,不过借助JavaScript可以达到宽度自适应的效果,下面为了方便使用了jQuery:
<div class="list"> <span class="list_name">娉娉袅袅</span> <input type="text" class="list_name hidden"> </div>
.hidden{ display: none; } .list{ background-color: #303030; color: aliceblue; display: inline-block; font-size: 2rem; padding: 0.5rem 1.5rem; border-radius: 1rem; } input{ border: none; outline: none; font-size: 2rem; background-color: transparent; color: #F16665; caret-color: aliceblue; }
var $span = $("span.list_name"); var $input = $("input.list_name"); function onEdit($span){ $span.hide() .siblings("input.list_name") .val($span.text()) .show() .focus(); } $span.click(function(){ onEdit($(this)); }); $input.bind("keydown", function(e){ if(e.keyCode == "13"){ $(this).hide() .siblings("span.list_name") .text($(this).val()) .show(); } }) $input.bind("blur", function(){ $(this).hide() .siblings("span.list_name") .text($(this).val()) .show(); }); $("input[type='text']").bind("focus",function(){ $(this).css("width",$(this).val().length + "em"); }) $("input[type='text']").bind("input propertychange",function(){ $(this).css("width",$(this).val().length + "em"); })
最新文章
- CorelDRAW X8 如何破解激活(附国际版安装包+激活工具) 2016-12-15
- 一起来做chrome扩展《本地存储localStorage》
- oracle for循环查找结果
- javascript_basic_01之概述
- SAM4E单片机之旅——24、使用DSP库求向量数量积
- 150929-拖延高于懒-HTML(End)
- xmind的第九天笔记
- python 访问php程序,实现定时
- [LeetCode#159] Missing Ranges Strobogrammatic Number
- 关于lower_bound()的用法--NYOJ 201作业题
- linux 目录说明
- Remoting通讯实例
- poj 2115 Matrix
- spring security运行流程图(转)
- Linux分区知识及企业场景分区76
- openvpn通过ldap或ad统一认证解决方案思路分享
- java学习--equals
- SpringBoot整合Jdbc
- lucene solr
- oracle在exp导出时报错PLS-00201: identifier &#39;EXFSYS.DBMS_EXPFIL_DEPASEXP&#39; must be declared
热门文章
- 并发系列(7)之 ScheduledThreadPoolExecutor 详解
- kubernetes实践之二:Kubernetes可视WEB UI Dashboard搭建
- 【转载】通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core?
- Python 中@property的用法
- cesium 之图层管理器篇(附源码下载)
- 二、redis命令简单使用(不区分大小写)
- SqlServer中的系统数据库
- 数据库MySQL(课下作业)
- C语言多线程的一个简单例子
- 基于开源CA系统ejbca community 6.3.1.1构建私有CA管理数字证书