jQuery 控制文本框自动缩小字体填充
js控制文本框自动缩小字体填充,当文本框中的字体超出文本框范围的时候,框内的字体会自动缩小,以填充整个文本框;
调用:resetFontSize($(".title"), 50, 10, 20);//重置字体大小
wordbox:jQuery对象
maxHeight:box的最大高度
minSize:最小字体大小
maxSize:最大字体大小
this.resetFontSize=function (wordbox, maxHeight, minSize, maxSize) { // var wordbox = $(".products .title"); //最大高度 //var maxHeight = 30; //初始化文字大小为最小 wordbox.css('font-size', minSize + "px"); maxSize++; wordbox.each(function () { //循环修改大小直至大于最大高度 for (var i = minSize; i < maxSize; i++) { if ($(this).height() > maxHeight) { //当容器高度大于最大高度的时候,上一个尝试的值就是最佳大小。 $(this).css('font-size', (i - 2) + 'px'); //结束循环 break; } else { //如果小于最大高度,文字大小加1继续尝试 $(this).css('font-size', i + 'px'); } } }); };
以上所述是小编给大家介绍的jQuery 控制文本框自动缩小字体填充,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
jQuery简单设置文本框回车事件的方法
本文实例讲述了jQuery简单设置文本框回车事件的方法.分享给大家供大家参考,具体如下: $(document).ready(function () { $("#txt_JumpPager").keydown(function (e) { var curKey = e.which; if (curKey == 13) { $("#lbtn_JumpPager").click(); return false; } }); }); 其中的txt_JumpPager为文本
-
jQuery简单实现点击文本框复制内容到剪贴板上的方法
本文实例讲述了jQuery简单实现点击文本框复制内容到剪贴板上的方法.分享给大家供大家参考,具体如下: //点击文本框复制其内容到剪贴板上方法 function copyToClipboard(txt) { if (window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text", txt); alert("已经成功复制到剪帖板上!"); } e
-
jQuery控制文本框只能输入数字和字母及使用方法
在公司开发WinForm项目时,发现公司自主研发的textbox控件非常强大,可以实现"只能输入数字"."只能输入字母"和"只能输入数字和字母"的三种输入限制,这样就可以精确控制用户输入的内容范围,让"用户永远没有办法输入限定的内容范围之外的其他内容",也就是"用户即使想犯错误也没有机会",这种限制控件输入的方式给了我很大的启发,如果在web项目中也能做到这样的精确控制,那么就可以避免因为一些非法输入而造成
-
jQuery使用正则表达式限制文本框只能输入数字
网站中的一个小功能:要求用户只能输入16位数字. 试过javascript的方法: 如:一种方法: //只允许输入数字 function checkkey2(value, e) { var key = window.event ? e.keyCode : e.which; if ((key > 95 && key < 106) || (key > 47 && key < 60)) { } else if (key != 8) { if (window
-
jquery实现文本框textarea自适应高度
浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法: <body> <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none"> </textarea> <script type="text/javascript" src="
-
jquery+ajax+text文本框实现智能提示完整实例
本文实例讲述了jquery+ajax+text文本框实现智能提示的方法.分享给大家供大家参考,具体如下: 模仿百度查询的智能提示 先看看效果图: 代码部分: CSS代码: <style type="text/css"> #searchresult { width: 130px; position: absolute; z-index: 1; overflow: hidden; left: 130px; top: 71px; background: #E0E0E0; bord
-
jQuery 控制文本框自动缩小字体填充
js控制文本框自动缩小字体填充,当文本框中的字体超出文本框范围的时候,框内的字体会自动缩小,以填充整个文本框; 调用:resetFontSize($(".title"), 50, 10, 20);//重置字体大小 wordbox:jQuery对象 maxHeight:box的最大高度 minSize:最小字体大小 maxSize:最大字体大小 this.resetFontSize=function (wordbox, maxHeight, minSize, maxSize) { //
-
jQuery监控文本框事件并作相应处理的方法
本文实例讲述了jQuery监控文本框事件并作相应处理的方法.分享给大家供大家参考.具体如下: //事情委托 $(document) .on('input propertychange', '#query', function(){ var input = $(this).val(); show(input); }); var show = function(txt){ var info = '监听:<b>' + txt + '</b><br /><br />
-
基于jQuery实现文本框只能输入数字(小数、整数)
在实际应用中,文本框中有时候只能够允许输入整数,但是有时候可能更为"博爱"一点,可以允许输入浮点数,下面就通过实例代码介绍一下如何利用jquery实现文本框只能输入小数,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/
-
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
JS 控制文本框只能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')"onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')"> JS 控制文本框只能输入数字.小数点 <inputonkeyup="value=value.repl
-
js控制文本框只输入数字和小数点的方法
本文实例讲述了js控制文本框只输入数字和小数点的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function clearNoNum(obj) { obj.value = obj.value.replace(/[^\d.]/g, "");//清除"数字"和"."以外的字符 obj.value = obj.value.replace(/^\./g, "");//验证第一个字符是数字而不是. obj.
-
js控制文本框输入的字符类型方法汇总
JS 控制文本框只能输入数字 复制代码 代码如下: <input onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')"> JS 控制文本框只能输入数字.小数点 复制代码 代码如下: <input onkeyu
-
jQuery实现文本框输入同步的方法
本文实例讲述了jQuery实现文本框输入同步的方法.分享给大家供大家参考.具体如下: 这段jquery代码可以保持一个文本框输入的同时另外一个文本框与之同步 var $inputs = $(".example-input"); $inputs.keyup(function() { $inputs.val($(this).val()); }); 希望本文所述对大家的jQuery程序设计有所帮助.
-
js实现鼠标点击文本框自动选中内容的方法
本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再去选择,省去了一些麻烦,提高了输入效率,用户肯定会喜欢这功能,那么实现的方法是怎么样呢?通过本代码你就搞明白了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-click
-
js控制文本框禁止输入特殊字符详解
在开发难免遇到一些前端需要验证输入的数据是否合法的问题,收集分享在这里同学们使用,欢迎补充. 1.标签上直接替换方法: JS 控制不能输入特殊字符 <input type="text"class="domain"onkeyup="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')": this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')
随机推荐
- [js]轻便的XMLHttpRequest应用函数:downloadUrl()
- Android 使用Vitamio打造自己的万能播放器(1)——准备
- PowerShell中捕获异常时的行号和列号的方法
- JAVA提高第十篇 ArrayList深入分析
- javascript demo 基本技巧
- ASP.Net页尾中添加JavaScript的最佳方法实战分享
- 微信小程序 input表单与redio及下拉列表的使用实例
- 使用php实现截取指定长度
- ASP简洁的多重查询的解决方案
- Ruby实现的删除已经合并的git分支脚本分享
- sql注入数据库修复的两种实例方法
- 提高C++程序运行效率的10个简单方法
- android实现图片闪烁动画效果的两种实现方式(实用性高)
- CSS 图片横向排列实现代码
- Bootstrap实现的表格合并单元格示例
- Spring加载properties文件的两种方式实例详解
- python检测服务器端口代码实例
- Java幸运28系统搭建数组的使用实例详解
- 浅谈Java线程Thread之interrupt中断解析
- 利用Nginx实现反向代理Node.js的方法详解