扫码关注官方订阅号
我希望在输入时候,因为输入宽的宽度不变,所以越输入越多的时候,字号会自动变小,实现思路应该是怎么样的,怎么实时监听呢?谢谢各位大侠
学习是最好的投资!
我的思路是监听input的change时间,并且给input设置size属性,当输入的文字等于size设置的值时,动态的改变size的值并且改变字体的大小。
监听onchange呗
= =。这个想法太不行了,你如果用户输入30个字,然后发现文字都看不清了(谷歌最小字体12px),这样的用户体验是不好的。
用change事件在鼠标离开的时候才生效,bind键盘的keyup事件,然后通过event.keycode来判断
$("#inputid").keyup(function(event){ if ((event.keyCode > 40 || event.keyCode == 8 || event.keyCode == 32)) { } /* keycode 40 = Down, 8 = BackSpace BackSpace, 32 = space space Keys with codes 40 and below are special (enter, arrow keys, escape, etc.) */ });
然后根据length来设置font-size
onKeyUp 事件嘛 改变input的size 会好一点吧
我的思路是用angular监听input,然后将文字绑定到另个宽度auto的p中,然后每次变化都监听该p的宽度,然后计算是否要改变字号,如果我做好了会上传
onkeyup 之后还要计算长度,因为一直按会有个漏洞。
使用input propertychange(兼容IE8) 事件动态改变font-size写了Demo:http://jsfiddle.net/abf7bux7/ 字体的长度与大小的比例根据需求调整
input
propertychange
<input type="text" id="un" style="font-size: 40px;width: 200px;height: 40px;"/> <script> var un = document.getElementById('un'); un.addEventListener('input',function(){ var len = this.value.length/1; un.style.fontSize = 40 *1/len + 'px'; },false); </script>
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
我的思路是监听input的change时间,并且给input设置size属性,当输入的文字等于size设置的值时,动态的改变size的值并且改变字体的大小。
监听onchange呗
= =。这个想法太不行了,你如果用户输入30个字,然后发现文字都看不清了(谷歌最小字体12px),这样的用户体验是不好的。
用change事件在鼠标离开的时候才生效,bind键盘的keyup事件,然后通过event.keycode来判断
然后根据length来设置font-size
onKeyUp 事件嘛 改变input的size 会好一点吧
我的思路是用angular监听input,然后将文字绑定到另个宽度auto的p中,然后每次变化都监听该p的宽度,然后计算是否要改变字号,如果我做好了会上传
onkeyup 之后还要计算长度,因为一直按会有个漏洞。
使用
input
propertychange
(兼容IE8) 事件动态改变font-size写了Demo:http://jsfiddle.net/abf7bux7/
字体的长度与大小的比例根据需求调整