<article style="outline: none; overflow-wrap: anywhere" class="min-h-[89px]" contenteditable="true" ref="editBox" id="editBox" @click="editClick" @keyup.enter.exact="handleSend" @paste.prevent="handlePaste" @keydown="editClick" @blur="editClick" ></article>里面粘贴html 文本都不能撤回
时间: 2023-12-05 07:15:35 浏览: 37
确实,在 `<article>` 元素中粘贴 HTML 文本后,使用浏览器的撤销操作无法撤回粘贴的文本。这是因为浏览器在粘贴 HTML 文本时会将其解析为 DOM 结构,并将其插入到 `<article>` 元素中,而浏览器的撤销操作只能撤销对 DOM 结构的更改,而不能撤销对剪贴板内容的更改。
如果您需要支持撤销操作,可以考虑使用 `contenteditable` 属性来实现编辑框,并使用 JavaScript 代码来处理用户输入和撤销操作。例如,您可以使用 `document.execCommand()` 方法来执行撤销操作,如下所示:
```html
<div contenteditable="true" id="editBox"></div>
<script>
const editBox = document.getElementById('editBox');
editBox.addEventListener('keydown', (event) => {
// 按下 Ctrl + Z 执行撤销操作
if (event.ctrlKey && event.key === 'z') {
document.execCommand('undo');
event.preventDefault();
}
});
</script>
```
通过使用 `document.execCommand()` 方法,您可以在 JavaScript 中执行撤销操作,并实现对粘贴的 HTML 文本的撤销操作。
相关问题
htlml:<div class="date-selector"> <select id="year"></select> <select id="month"></select> <select id="day"></select> </div> css:.date-selector { display: flex; flex-wrap: wrap; gap: 10px; } .date-selector select { padding: 5px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; }
好的,以下是修改后的 CSS 样式代码:
```css
.date-selector {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.date-selector select {
padding: 10px;
font-size: 18px;
border: 2px solid #ccc;
border-radius: 10px;
outline: none;
}
.date-selector select:focus {
border-color: #6c63ff;
box-shadow: 0 0 5px #6c63ff;
}
```
我主要是增加了一些样式,使得选择框更加美观和易用。其中:
- `justify-content: center;` 和 `align-items: center;` 用于水平和垂直居中选择框。
- `margin-top: 20px;` 用于在选择框上方增加一些间距,让整个样式更加舒适。
- `padding: 10px;` 和 `font-size: 18px;` 使得选择框更加易用,字体更加清晰。
- `border: 2px solid #ccc;` 和 `border-radius: 10px;` 使得选择框更加美观。
- `outline: none;` 用于去除选择框获得焦点时的默认边框。
- `select:focus` 用于设置选择框获得焦点时的样式,让用户更加清晰地知道当前选择框处于获得焦点的状态。
让四个<div class="row"> <div class="col-md-3"> <div class="card mb-3 shadow-sm"> <img src="img/9.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">醇粹 狗粮中大型犬成犬粮 </h5> <p class="card-text">金毛萨摩狗粮 皮肤毛发柔顺全价全犬种15kg</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-cart-fill"></i>加入购物车</button> </div> <small class="text-muted">$209</small> </div> </div> </div> </div>在同一行
可以使用 Bootstrap 栅格系统的 `col-md-*` 类来控制每个卡片的宽度,并将它们放入一个共同的 `row` 中以让它们在同一行显示。例如:
```html
<div class="row">
<div class="col-md-3">
<div class="card mb-3 shadow-sm">
<!-- 卡片内容 -->
</div>
</div>
<div class="col-md-3">
<div class="card mb-3 shadow-sm">
<!-- 卡片内容 -->
</div>
</div>
<div class="col-md-3">
<div class="card mb-3 shadow-sm">
<!-- 卡片内容 -->
</div>
</div>
<div class="col-md-3">
<div class="card mb-3 shadow-sm">
<!-- 卡片内容 -->
</div>
</div>
</div>
```
这个代码将四个卡片放在同一行,并且每个卡片的宽度为其父元素(即 `col-md-3`)的四分之一。你可以根据需要调整卡片的宽度和数量。