主页 / 问题 / 1526218
Accepted
Alexander Lonberg
Asked:2023-06-18 00:12:26 +0000 UTC2023-06-18 00:12:26 +0000 UTC

<INPUT PLACEHOLDER> 在任何 HTML/CSS/JS 技术上模拟 <DIV CONTENTEDITABLE>？[解决了]

  • 772

我正在尝试<input placeholder="...">模拟<div contenteditable>.

首先想到的是添加::before，关注正在编辑的元素后，<div ...>删除包含的类。

问题：尝试运行代码并单击文本“编辑字段...”，就像您通常所做的那样<input type=text>- 焦点一切正常，但文本光标丢失。我猜是因为点击是在::before. 如果您单击一个可用空间（右侧），一切都会按预期进行 -placeholder它消失并且光标出现在该字段中，之后您可以立即打印。

问题：如何达到预期的效果？当然没有任何额外的层。也许有一些 JS / API / CSS 允许您使元素::before不与其父元素重叠？

已解决：@Grundy CSS pointer-events 的第一条评论：无；

const { createApp, ref } = Vue

const comp = {
  setup() {
    const showPh = ref(true)
    return {
      showPh
    }
  },
  template: `
   <div
      v-bind:class="['edit', {['edit-ph']: showPh}]"
      contenteditable="true"
      @focus="() => {showPh = false}"
      @blur="({target}) => {target.textContent = '';showPh = true}"
   ></div>

   <p>Для сброса надо кликнуть в любом месте.</p>`
}

createApp(comp).mount('#app')
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 24px;
}

.edit {
  border: solid 1px rgb(182, 182, 182);
  padding: 0.2em;
}

.edit-ph::before {
  position: relative;
  content: 'Отредактируйте поле ...';
  color: rgb(182, 182, 182);
  cursor: text;
  /* РЕШЕНИЕ */
  pointer-events: none;
}
<script src="https://unpkg.com/vue@next"></script>
<div id="app"></div>

javascript

1 个回答

  1. Best Answer

    你可以设置pointer-events :none在伪元素上，然后点击它会被忽略

    const { createApp, ref } = Vue

const comp = {
  setup() {
    const showPh = ref(true)
    return {
      showPh
    }
  },
  template: `
   <div
      v-bind:class="['edit', {['edit-ph']: showPh}]"
      contenteditable="true"
      @focus="() => {showPh = false}"
      @blur="({target}) => {target.textContent = '';showPh = true}"
   ></div>

   <p>Для сброса надо кликнуть в любом месте.</p>`
}

createApp(comp).mount('#app')
    body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 24px;
}

.edit {
  border: solid 1px rgb(182, 182, 182);
  padding: 0.2em;
}

.edit-ph::before {
  pointer-events: none;
  position: relative;
  content: 'Отредактируйте поле ...';
  color: rgb(182, 182, 182);
  cursor: text;
}
    <script src="https://unpkg.com/vue@next"></script>
<div id="app"></div>

    • 2

相关问题