空白を使用せずにテキストを入力するまでプレースホルダを表示

Question

以下のHTMLコードを検討してください。ユーザーがスペースを含む任意の文字の入力を開始すると、プレースホルダはすぐに消えます。

<input type="text" id="name" placeholder="Enter Your Name"/>

ユーザーは、スペースなしでテキストを入力するまで、プレースホルダを見えるようにする方法はありますか？

Answer 1

あなたは鍵が空白のときにそれを停止する​​イベントを処理することができます。ユーザーはどこにプレースホルダを表示したいん

document.getElementById("name").addEventListener("keydown", function(e) { 
 
    if(document.getElementById("name").value.length === 0 && e.key === ' ') { 
 
    if(e.preventDefault) { e.preventDefault(); } 
 
    else { e.returnValue = false; } 
 
    } 
 
});

<input type="text" id="name" placeholder="Enter Your Name"/>

Answer 2

プレースホルダは、要素に入力がない場合にのみ表示されます。

空白以外の文字が表示されるまでこのプレースホルダを表示させたい場合は、入力データを除外して空白を拒否することができます。

Answer 3

CSSスクリプトに従うと、HTMLコードがそのトリックを行います。

#login { 
 
    font-size: 12px; 
 
    margin: 0 auto; 
 
    width: 700px; 
 
} 
 
#login li { 
 
    float: left; 
 
    list-style: none; 
 
    margin-left: 30px; 
 
    position: relative; 
 
} 
 
#login li:first-child { 
 
    margin-left: 0; 
 
} 
 
label { 
 
    line-height: 40px; 
 
    position: absolute; 
 
    right: 120px; 
 
    top: 0; 
 
    bottom: 0; 
 
    -moz-transition: 0.3s right ease; 
 
    -ms-transition: 0.3s right ease; 
 
    -o-transition: 0.3s right ease; 
 
    -webkit-transition: 0.3s right ease; 
 
    transition: 0.3s right ease; 
 
    z-index: 0 
 
} 
 
input { 
 
    color: transparent; 
 
    font-size: 12px; 
 
    height: 35px; 
 
    -moz-border-radius: 3px; 
 
    -webkit-border-radius: 3px; 
 
    border-radius: 3px; 
 
    -moz-transition: 0.3s all ease; 
 
    -ms-transition: 0.3s all ease; 
 
    -o-transition: 0.3s all ease; 
 
    -webkit-transition: 0.3s all ease; 
 
    transition: 0.3s all ease; 
 
} 
 
input[type="email"], 
 
input[type="password"] { 
 
    border: 1px solid #ccc; 
 
    height: 35px; 
 
    padding: 0 10px; 
 
    width: 240px; 
 
    position: relative; 
 
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .06); 
 
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .06); 
 
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .06); 
 
    z-index: 2; 
 
} 
 
input[type="email"] { 
 
    color: rgba(47, 130, 194, .8); 
 
} 
 
/* Placeholder */ 
 

 
input[type="email"]:-moz-placeholder { 
 
    color: rgba(47, 130, 194, .6); 
 
} 
 
input[type="email"]:-ms-input-placeholder { 
 
    color: rgba(47, 130, 194, .6); 
 
} 
 
input[type="email"]::-webkit-input-placeholder { 
 
    color: rgba(47, 130, 194, .6); 
 
} 
 
/* Label */ 
 

 
input[type="email"] + label { 
 
    color: rgb(47, 130, 194); 
 
} 
 
input:focus + label { 
 
    right: 10px; 
 
} 
 
input[type="email"]:focus, 
 
input[type="password"]:focus { 
 
    background-color: rgba(255, 255, 255, .8); 
 
} 
 
/* Submit */ 
 

 
input[type="submit"] { 
 
    background-color: #333; 
 
    background: -moz-linear-gradient(bottom, #333, #444); 
 
    background: -ms-linear-gradient(bottom, #333, #444); 
 
    background: -o-linear-gradient(bottom, #333, #444); 
 
    background: -webkit-linear-gradient(bottom, #333, #444); 
 
    background: linear-gradient(bottom, #333, #444); 
 
    border: 1px solid #222; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    height: 35px; 
 
    width: 110px; 
 
}

<form id="login"> 
 
    <ul> 
 
    <li> 
 
     <input id="email" name="email" placeholder="Your Email" title="Your Email" type="email" required /> 
 
     <label for="email">Your Email</label> 
 
    </li> 
 
    </ul> 
 
</form>

Answer 4

/** 
 
* Since inputs are replace elements(1), using 
 
* pseudo-elements like ::after will not work. 
 
* Thus, the data-placeholder on the labels. 
 
* 
 
* (1) http://reference.sitepoint.com/css/replacedelements 
 
*/ 
 

 
// Select all text input fields 
 
var formText = document.querySelectorAll('[data-js=form-text]'); 
 

 
// For each field... 
 
[].forEach.call(formText, function(el, i) { 
 
    // Cache the field label 
 
    var thisLabel = el.parentNode.querySelector('label'); 
 
    
 
    // Add an 'active' class if text present 
 
    el.onkeyup = function() { 
 
    
 
    if (el.value.length > 0) { 
 
     thisLabel.classList.add('active'); 
 
    } else { 
 
     thisLabel.classList.remove('active'); 
 
    } 
 
    
 
    }; 
 
    
 
});

body{ 
 
    margin: 2em; 
 
} 
 

 
label { 
 
    display: inline-block;  
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
label.active:after { 
 
    bottom: -2.8em; 
 
    color: #888; 
 
    content: attr(data-placeholder); 
 
    left: 0; 
 
    position: absolute; 
 
} 
 

 
input { 
 
    margin: 0 0 2em 0; 
 
}

<form> 
 
    
 
    <div> 
 
    <label for="name" data-placeholder="First and Last">Name:</label> 
 
    <input type="text" id="name" placeholder="First and Last" autocomplete="off" data-js="form-text"> 
 
    </div> 
 
     
 
    <div> 
 
    <label for="Phone" data-placeholder="###-###-####">Phone:</label> 
 
    <input type="tel" id="phone" placeholder="###-###-####" autocomplete="off" data-js="form-text"> 
 
    </div> 
 
    
 
    <div> 
 
    <label for="email" data-placeholder="user@domain.com">Email:</label> 
 
    <input type="email" id="email" placeholder="user@domain.com" autocomplete="off" data-js="form-text"> 
 
    </div> 
 
    
 
</form>