jquery - CSS 显示:弹性;在 IE 浏览器中无法正常工作
问题描述
我正在使用 Jquery 可拖动组件将元素添加到<p>
.
我有以下问题
IE 浏览器显示不好的外观(见图)它显示all-scroll
而不是Pointer
这是因为这个 CSS
p.given {
display: flex;
flex-wrap: wrap;
}
这个 CSS 我用来<p>
正确显示内容。如果我删除该 CSS,有时会添加多个位置的可拖动组件。并且<p>
内容在放置组件后进入下一行。你能建议什么代替flex
吗?我无法删除这个 CSS ( p.given { display: flex; flex-wrap: wrap; }
),因为如果我删除了<p>
不灵活的内容,所以请给我一个解决方案来避免这个 IE 浏览器问题。
$(function() {
function textWrapper(str, sp, btn) {
if (sp == undefined) {
sp = [0, 0];
}
var txt = "";
if (btn) {
txt = "<span class='w b'>" + str + "</span>";
} else {
txt = "<span class='w'>" + str + "</span>";
}
if (sp[0]) {
txt = " " + txt;
}
if (sp[1]) {
txt = txt + " ";
}
return txt;
}
function chunkWords(p) {
var words = p.split(" ");
words[0] = textWrapper(words[0], [0, 1]);
var i;
for (i = 1; i < words.length; i++) {
var re = /\[.+\]/;
if (re.test(words[i])) {
var b = makeTextBox(words[i].slice(1, -1));
words[i] = " " + b.prop("outerHTML") + " ";
} else {
if (words[0].indexOf(".")) {
words[i] = textWrapper(words[i], [1, 0]);
} else {
words[i] = textWrapper(words[i], [1, 1]);
}
}
}
return words.join("");
}
function unChunkWords(tObj) {
var words = [];
$(".w", tObj).each(function(i, el) {
console.log($(el).text(), $(el).attr("class"));
if ($(el).hasClass("b")) {
words.push("[" + $(el).text().trim() + "]");
} else {
words.push($(el).text().trim());
}
});
return words.join(" ");
}
function makeBtn(tObj) {
var btn = $("<span>", {
class: "ui-icon ui-icon-close"
}).appendTo(tObj);
}
function makeTextBox(txt) {
var sp = $("<span>", {
class: "w b"
}).html(txt);
makeBtn(sp);
return sp;
}
function makeDropText(obj) {
return obj.droppable({
drop: function(e, ui) {
var txt = ui.draggable.text();
var newSpan = textWrapper(txt, [1, 0], 1);
$(this).after(newSpan);
makeBtn($(this).next("span.w"));
makeDropText($(this).next("span.w"));
$("span.w.ui-state-highlight").removeClass("ui-state-highlight");
},
over: function(e, ui) {
$(this).add($(this).next("span.w")).addClass("ui-state-highlight");
},
out: function() {
$(this).add($(this).next("span.w")).removeClass("ui-state-highlight");
}
});
}
$("p.given").html(chunkWords($("p.given").text()));
$("p.given").on("click", ".b > .ui-icon", function() {
$(this).parent().remove();
});
$("p.given").blur(function() {
var w = unChunkWords($(this));
console.log(w);
$(this).html(chunkWords(w));
makeDropText($("p.given span.w"));
});
$("span.given").draggable({
helper: "clone",
revert: "invalid"
});
makeDropText($("p.given span.w"));
});
p.given {
display: flex;
flex-wrap: wrap;
}
p.given span.w span.ui-icon {
cursor: pointer;
}
div.blanks {
display: inline-block;
min-width: 50px;
border-bottom: 2px solid #000000;
color: #000000;
}
div.blanks.ui-droppable-active {
min-height: 20px;
}
span.answers>b {
border-bottom: 2px solid #000000;
}
span.given {
margin: 5px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
<p class="given" contenteditable="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry. [Lorem] Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="divider"></div>
<div class="section">
<section>
<div class="card blue-grey ">
<div class="card-content white-text">
<div class="row">
<div class="col s12">
<span class="given btn-flat white-text red lighten-1" rel="1">the Santee, thDakota</span>
<span class="given btn-flat white-text red lighten-1" rel="2">America</span>
<span class="given btn-flat white-text red lighten-1" rel="3">Qatar</span>
<span class="given btn-flat white-text red lighten-1" rel="4">Philippines</span>
</div>
</div>
</div>
</div>
</section>
</div>
解决方案
首先,为什么要支持IE?这是一个非常古老的浏览器,有很多问题,特别是在开发中。我还注意到您使用 jQuery 1.12.4 和 jQueryUI 1.12.1。同样,它们是旧版本,会使您的代码变慢并且可能不安全。
至于解决方案,问题在于 contentEditable 选项。删除后,光标在 IE11 上显示正常。
我从没想过我会这么说,但是:我在 IE11 上测试过,它工作正常
这是新代码:
根据评论,我添加了一个新函数,该函数检查用户是否点击了 p 元素,然后将 contenteditable 设置为 true,否则将其设置为 false。这在 IE 上不太理想,但我认为这是您可以从该浏览器中获得的最大收益。
$(function() {
function textWrapper(str, sp, btn) {
if (sp == undefined) {
sp = [0, 0];
}
var txt = "";
if (btn) {
txt = "<span class='w b'>" + str + "</span>";
} else {
txt = "<span class='w'>" + str + "</span>";
}
if (sp[0]) {
txt = " " + txt;
}
if (sp[1]) {
txt = txt + " ";
}
return txt;
}
function chunkWords(p) {
var words = p.split(" ");
words[0] = textWrapper(words[0], [0, 1]);
var i;
for (i = 1; i < words.length; i++) {
var re = /\[.+\]/;
if (re.test(words[i])) {
var b = makeTextBox(words[i].slice(1, -1));
words[i] = " " + b.prop("outerHTML") + " ";
} else {
if (words[0].indexOf(".")) {
words[i] = textWrapper(words[i], [1, 0]);
} else {
words[i] = textWrapper(words[i], [1, 1]);
}
}
}
return words.join("");
}
function unChunkWords(tObj) {
var words = [];
$(".w", tObj).each(function(i, el) {
console.log($(el).text(), $(el).attr("class"));
if ($(el).hasClass("b")) {
words.push("[" + $(el).text().trim() + "]");
} else {
words.push($(el).text().trim());
}
});
return words.join(" ");
}
function makeBtn(tObj) {
var btn = $("<span>", {
class: "ui-icon ui-icon-close"
}).appendTo(tObj);
}
function makeTextBox(txt) {
var sp = $("<span>", {
class: "w b"
}).html(txt);
makeBtn(sp);
return sp;
}
function makeDropText(obj) {
return obj.droppable({
drop: function(e, ui) {
var txt = ui.draggable.text();
var newSpan = textWrapper(txt, [1, 0], 1);
$(this).after(newSpan);
makeBtn($(this).next("span.w"));
makeDropText($(this).next("span.w"));
$("span.w.ui-state-highlight").removeClass("ui-state-highlight");
},
over: function(e, ui) {
$(this).add($(this).next("span.w")).addClass("ui-state-highlight");
},
out: function() {
$(this).add($(this).next("span.w")).removeClass("ui-state-highlight");
}
});
}
$("p.given").html(chunkWords($("p.given").text()));
$("p.given").on("click", ".b > .ui-icon", function() {
$(this).parent().remove();
});
$("p.given").blur(function() {
var w = unChunkWords($(this));
console.log(w);
$(this).html(chunkWords(w));
makeDropText($("p.given span.w"));
});
$("span.given").draggable({
helper: "clone",
revert: "invalid"
});
makeDropText($("p.given span.w"));
/**
* New function. Check document click event and see if use clicked
* inside or outside the p.given element then set contenteditable
* accordingly.
*/
$(document).on("click", function(e) {
let pElement = jQuery(e.target).closest("p.given");
let check = !$(event.target).is("p.given") && !$(event.target).parents("p.given").is("p.given");
if (check) {
$("p.given").attr("contenteditable", "false");
} else {
$("p.given").attr("contenteditable", "true").focus();
}
});
});
p.given {
display: flex;
flex-wrap: wrap;
}
p.given span.w span.ui-icon {
cursor: pointer;
}
div.blanks {
display: inline-block;
min-width: 50px;
border-bottom: 2px solid #000000;
color: #000000;
}
div.blanks.ui-droppable-active {
min-height: 20px;
}
span.answers>b {
border-bottom: 2px solid #000000;
}
span.given {
margin: 5px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
<p class="given" contenteditable="false">Lorem Ipsum is simply dummy text of the printing and typesetting industry. [Lorem] Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="divider"></div>
<div class="section">
<section>
<div class="card blue-grey ">
<div class="card-content white-text">
<div class="row">
<div class="col s12">
<span class="given btn-flat white-text red lighten-1" rel="1">the Santee, thDakota</span>
<span class="given btn-flat white-text red lighten-1" rel="2">America</span>
<span class="given btn-flat white-text red lighten-1" rel="3">Qatar</span>
<span class="given btn-flat white-text red lighten-1" rel="4">Philippines</span>
</div>
</div>
</div>
</div>
</section>
</div>
推荐阅读
- amazon-web-services - 无法将 Maria DB 连接到 AWS Quicksight
- php - 文档更改时 PHP 重新加载
- asp.net-core - 无法在 xUnit 集成测试中设置 ASP.NET Core 3.1 环境字符串
- javascript - 在 javascript 中使用正则表达式获取多个结果
- c++ - 谁能告诉为什么这个二进制到十进制程序对二进制数 11111111111 给出错误的结果?
- api - 在 Azure DevOps 中,列出生成定义 API 返回 401
- javascript - 通过列表视图从数据库中删除多个选定项目?
- reactjs - React 中毫秒日期的 PropType
- java - 仅在周末打印日期
- javascript - 在 React Native 中 TextInput 颜色仅更新一次