Javascript：Span contentEditable 作为输入（占位符替代）答案

【问题标题】：Javascript: Span contentEditable as input (Placeholder Alternative)Javascript：Span contentEditable 作为输入（占位符替代）
【发布时间】：2020-10-01 15:21:31
【问题描述】：

我需要当用户删除（span id“ps”）的内容时，显示span id“lbps”。我需要这样做来替代使用 javascript 的输入占位符。

<style>
[contenteditable="true"].single-line {
    white-space: nowrap;
    width:200px;
    overflow: hidden;
} 
[contenteditable="true"].single-line br {
    display:none;

}
[contenteditable="true"].single-line * {
    display:inline;
    white-space:nowrap;
}
.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
</style>
<body onload="document.getElementById('ps').focus();document.getElementById('ps').click()">
<span id="ps" onkeypress="document.getElementById('lbps').style.visibility='hidden'" contentEditable="true" class="single-line" spellcheck="false" style="position:absolute;border:1px solid grey;display:inline-block;width:140;height:23;padding-top:4px;padding-left:12px"></span>
<div id="lbps" class="noselect" style="cursor:text;position:relative;padding-top:5px;padding-left:16px;color:lightgrey" spellcheck="false" onclick="document.getElementById('ps').focus();document.getElementById('ps').click()">
Contraseña
</div>
</body>

【问题讨论】：

什么文本区域？显示所有代码
嗨，你可以检查更新我的问题。
嗨，你的代码一团糟。你能用图纸或图片来展示你想要做什么吗？
你有 onclick="document.getElementById('itext').focus()"> 密码但你的代码中没有这样的id
大多数浏览器都无法在contenteditables 上触发.focus()。

标签： javascript html contenteditable placeholder

【解决方案1】：

如果你坚持使用`contenteditable`

为了能够在用户按下某个键时从span 元素中获取值，您需要使用onkeyup 事件，但这会带来一些缺点，例如如果按住该键会出现延迟和不良行为可以通过结合onkeydown 来缓解。

☝ 请注意，我简化了代码以阐明想法并提高可读性。

var wrapper = document.getElementById('wrapper');
var password = document.getElementById('password');
var placeholder = document.getElementById('placeholder');

function onValueChange() {
  placeholder.style.display = password.textContent.length > 0
    ? 'none'
    : 'inline-block';
}

function setPasswordFocus() {
  password.focus();
}

window.onload = setPasswordFocus;
placeholder.onclick = setPasswordFocus;

wrapper.onkeyup = onValueChange;
wrapper.onkeydown = onValueChange;

.single-line {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#wrapper {
  position: absolute;
}

#password {
  position: absolute;
  border: 1px solid grey;
  display: inline-block;
  font-family: arial;
  font-size: 15px;
  width: 140;
  height: 23;
  padding-top: 4px;
  padding-left: 8px;
}

#placeholder {
  position: relative;
  cursor: text;
  display: inline-block;
  font-family: arial;
  font-size: 15px;
  padding-top: 5px;
  padding-left: 9px;
  color: rgba(0,0,0,.4);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div id="wrapper">
  <span id="password" contentEditable="true" class="single-line" spellcheck="false"></span>
  <span id="placeholder" class="noselect">Password</span>
</div>

使用`input` 元素获得更简单流畅的体验

contenteditable 元素比 input 元素更难使用，我建议坚持这一点，以便您可以使用 oninput 事件在输入值更改后立即有条件地验证输入值。

您仍然可以使用span 元素作为输入占位符的替代品，而且难度较小。

☝ 请注意，我简化了代码以阐明想法并提高可读性。

var password = document.getElementById('password');
var placeholder = document.getElementById('placeholder');

function onValueChange() {
  placeholder.style.display = password.value.length > 0
    ? 'none'
    : 'inline-block';
}

function setPasswordFocus() {
  password.focus();
}

window.onload = setPasswordFocus;
placeholder.onclick = setPasswordFocus;

password.oninput = onValueChange;

.single-line {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.wrapper {
  position: absolute;
}

#password {
  position: absolute;
  border: 1px solid grey;
  display: inline-block;
  font-family: arial;
  font-size: 15px;
  width: 140;
  height: 23;
  padding-top: 4px;
  padding-left: 8px;
}

#placeholder {
  position: relative;
  cursor: text;
  display: inline-block;
  font-family: arial;
  font-size: 15px;
  padding-top: 5px;
  padding-left: 9px;
  color: rgba(0,0,0,.4);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div class="wrapper">
  <input id="password" class="single-line" spellcheck="false">
  <span id="placeholder" class="noselect">Password</span>
</div>

【讨论】：

嗨，我需要模拟输入代码，我不喜欢使用它。
既然你坚持使用contenteditable我已经更新了我的答案

如果你坚持使用contenteditable

使用input 元素获得更简单流畅的体验

如果你坚持使用`contenteditable`

使用`input` 元素获得更简单流畅的体验