jquery扩展

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_34358365

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/figoisxjs/blog/127490

本文介绍了一种使用jQuery实现的文字输入长度限制功能，包括字符计数提示与超限警告；同时还提供了一种文本过长时的截断显示方法，保持良好的页面展示效果，并通过hover事件显示完整文本；此外还分享了全选表格中复选框及设置输入框默认值的实用技巧。

2019独角兽企业重金招聘Python工程师标准>>>

文字输入限制

所需的js文件：

jquery.js

$.fn.showLimit = function(length, target, locale) {
        var obj = $(this);
        var textLength = obj.val().length;
        if (locale == "cn" || locale == "CN") {
                var temp_str = obj.val().match(/[^\x00-\xff]/ig);
                textLength = obj.val().length
                                + (temp_str == null ? 0 : temp_str.length);
        }
        if (length >= textLength) {
                $(target).html("您还可以输入" + parseInt((length - textLength) / 2) + "个字。");
        } else {
                $(target).html(
                                "<font color=\"red\">超出" + Math.ceil((textLength - length) / 2)
                                                + "个字符!</font>");
        }
}

用法：

$("#t1").showLimit(50,"#ss","cn");

字段过长，影响展示效果，需截取开头一段，后尾加省略号。

所需的js文件：

jquery.js

$.fn.shortcut = function(length) {
        var obj = $(this);
        obj.each(function() {
                var text = $(this).html();
                $(this).attr('title', text);
                if (text.length > length) {
                        text = text.substring(0, length) + "...";
                        $(this).html(text);
                }
        });
}

使用方法：
$(".texts").shutcut(4); 表示所有class为"texts"，文本长度大于4的，截取前4个字，后面"…"号补齐，同时hover事件可看到完整文本提示。

全选效果

所需的js文件：

jquery.js

/* 全选 */
function checkAll(obj) {
        if ($(obj).attr("checked") == true) {
                $(obj).closest("table").find("input:checkbox").each(function() {
                        $(this).attr("checked", true);
                });
        } else {
                $(obj).closest("table").find("input:checkbox").each(function() {
                        $(this).attr("checked", false);
                });
        }
}

用法：

<input type="checkbox" onclick="checkAll(this);"/>全选

默认值效果：

所需的js文件：

jquery.js

获得、失去焦点时处理默认值：

$.fn.showDefault = function(text) {
        var obj = $(this);
        obj.val(text);
        obj.focusout(function() {
                if (0 == $.trim($(obj).val()).length) {
                        $(obj).val(text);
                }
        });
        obj.focusin(function() {
                if ($.trim($(obj).val()) == text) {
                        $(obj).val("");
                }
        });
}

用法：

var text = "";

$("#c1").showDefault(text);

转载于:https://my.oschina.net/figoisxjs/blog/127490