Javascript: Span contentEditable as input (Placeholder Alternative)

问题描述 投票：0回答：1

我需要当用户删除(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>
javascript html contenteditable placeholder
1个回答
0
投票

如果你坚持使用 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 元素，以获得更简单、更顺畅的体验

A 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.