使用 textarea 角色将占位符属性添加到跨度答案

【问题标题】：Adding placeholder attribute to a span with textarea role使用 textarea 角色将占位符属性添加到跨度
【发布时间】：2021-07-27 19:17:20
【问题描述】：

  <span
    role="textbox"
    placeholder={"Amazing Title"}
    contentEditable
    className={styles.StrapLineInput}
  ></span>

我正在创建一个反应应用程序。我使用带角色的 span 而不是实际的 textarea，以便使输入区域的高度自动随输入的行数而变化。我也想给它一个占位符。我该怎么做？

【问题讨论】：

标签： javascript html css reactjs frontend

【解决方案1】：

我添加了你提到的一些 CSS 样式输入区域高度会随着输入的行数自动变化，闪烁的光标在开头可见为 input。

您可以随意添加内边距、宽度、边框等的值。

span{
    outline: none;
    min-height: 20px;
    line-height: 20px;
    padding: 8px 8px 4px 8px;
    border: 1px solid #708090;
    display:inline-block;
    width:330px;
}

span:empty:before {
    content: attr(placeholder);
    color: #aaa; 
}

&lt;span role="textbox" placeholder='Amazing Title' contentEditable=true &gt;&lt;/span&gt;

【讨论】：

【解决方案2】：

我是这样做的：

document.querySelector("span").focus()

span[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
}
span{cursor:pointer;}

  <span
    role="textbox"
    placeholder="Amazing Title"
    contentEditable="true"
    className="input"
  ></span>

【讨论】：

您的回答有帮助！非常感谢！保持安全！

【解决方案3】：

这里，

我用 CSS 属性创建了一个demo

span.class[contenteditable] {
  display: inline-block;
}

span.class[contenteditable]:empty::before {
  content: attr(data-placeholder);
  display: inline-block;
}

span.class[contenteditable]:empty:focus::before {
  content: attr(data-focused-advice);
}

【讨论】：