Javascript：跨度 contentEditable 作为输入（占位符替代）

Question

我需要当用户删除(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>

Answer 1

如果你坚持要用`contenteditable`

为了能够在用户按下某个键时从 span 元素中获取值，您需要使用 onkeyup 事件，但这会带来一些缺点，例如滞后和不良行为按住键可以通过组合 onkeydown.

来缓解

☝ Note that I simplified the code to clarify the idea and improve readability.

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 元素作为输入占位符的替代品，而不费力。

☝ Note that I simplified the code to clarify the idea and improve readability.

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>

Javascript：跨度 contentEditable 作为输入（占位符替代）

Javascript: Span contentEditable as input (Placeholder Alternative)

html

javascript

placeholder

contenteditable

如果你坚持要用contenteditable

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

如果你坚持要用`contenteditable`

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