lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-04-05 17:38:02 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(form): 修复 IE8 中 checkbox 半选问题 (#2442)

Browse Source 
* fix(table): 修复 table 在 IE8 下报错问题

* update code

* fix(form): 修复 IE8 中 checkbox 半选问题

* chore: 恢复非 IE8 改动
This commit is contained in:
morning-star 2024-12-30 22:41:44 +08:00 committed by GitHub
parent 7c9fb60811
commit 000368b501
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 70 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/modules/form.js
View File

@ -10,6 +10,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var util = layui.util;
var hint = layui.hint();
var device = layui.device();
var needCheckboxFallback = lay.ie && parseFloat(lay.ie) === 8;
var MOD_NAME = 'form';
var ELEM = '.layui-form';
@ -944,7 +945,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){
title = skin === 'switch' ? title.split('|') : [title];
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
// 处理 IE8 indeterminate 属性重新定义 get set 后无法设置值的问题
if(needCheckboxFallback){
toggleAttribute.call(check, 'lay-form-sync-checked', check.checked);
!check.checked && toggleAttribute.call(check, 'lay-form-sync-indeterminate', check.indeterminate);
}
// 替代元素
var reElem = $(['<div class="layui-unselect '+ RE_CLASS[0],
(check.checked ? (' '+ RE_CLASS[1]) : ''), // 选中状态
@ -1021,6 +1028,11 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var skin = othis.attr('lay-skin');
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
if(needCheckboxFallback){
toggleAttribute.call(radio, 'lay-form-sync-checked', radio.checked);
}
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
var title = util.escape(radio.title || '');
@ -1095,27 +1107,50 @@ layui.define(['lay', 'layer', 'util'], function(exports){
/**
* checkbox 和 radio 指定属性变化时自动更新 UI
* 只能用于 boolean 属性
* @param {HTMLInputElement} elem - HTMLInput 元素
* @param {'checked' | 'indeterminate'} propName - 属性名
* @param {() => void} handler - 属性值改变时执行的回调
* @see https://learn.microsoft.com/zh-cn/previous-versions//ff382725(v=vs.85)?redirectedfrom=MSDN
*/
Form.prototype.syncAppearanceOnPropChanged = function(elem, propName, handler){
var originProps = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, propName);
Form.prototype.syncAppearanceOnPropChanged = function(){
// 处理 IE8 indeterminate 属性重新定义 get set 后无法设置值的问题
// 此处性能敏感，不希望每次赋值取值时都判断是否需要 fallback
if (needCheckboxFallback) {
return function(elem, propName, handler) {
var originProps = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, propName);
Object.defineProperty(elem, propName,
lay.extend({}, originProps, {
// 此处的 get 是为了兼容 IE<9
get: function(){
return originProps.get.call(this);
},
set: function (newValue) {
originProps.set.call(this, newValue);
handler.call(this);
}
})
);
}
Object.defineProperty(elem, propName,
lay.extend({}, originProps, {
// 此处的 get 是为了兼容 IE<9
get: function(){
return typeof this.getAttribute('lay-form-sync-' + propName) === 'string';
},
set: function (newValue) {
toggleAttribute.call(this, 'lay-form-sync-' + propName, newValue);
handler.call(this);
}
})
);
}
}
return function(elem, propName, handler){
var originProps = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, propName);
Object.defineProperty(elem, propName,
lay.extend({}, originProps, {
// 此处的 get 是为了兼容 IE<9
get: function(){
return originProps.get.call(this);
},
set: function (newValue) {
originProps.set.call(this, newValue);
handler.call(this);
}
})
);
}
}()
/**
* 主动触发验证
@ -1282,6 +1317,25 @@ layui.define(['lay', 'layer', 'util'], function(exports){
return new RegExp(regexPattern.join(''), !caseSensitive ? 'i' : undefined);
}
// 引用自 https://github.com/msn0/mdn-polyfills/blob/master/src/Element.prototype.toggleAttribute/toggleattribute.js
function toggleAttribute(name, force) {
var forcePassed = arguments.length === 2;
var forceOn = !!force;
var forceOff = forcePassed && !force;
if (this.getAttribute(name) !== null) {
if (forceOn) return true;
this.removeAttribute(name);
return false;
} else {
if (forceOff) return false;
this.setAttribute(name, '');
return true;
}
}
var form = new Form();
var $dom = $(document);