我有一个输入类型文本,其中占位符具有两个值,例如(英语和西班牙语(。但是我希望英文文字保持一致,西班牙语文字应该是正确的,但就我而言,我正在这样做。
Example:
<input type="text" nam="name" placeholder="Name Nombre" >
我正在使用NBSP这样做,但是当我在另一个窗口上打开它时 或在响应模式下文本进入外面或不对齐。 因此,我该如何使占位符的文字与左右与右边的文本相结合,请帮助我与此相关联。
您无法使用纯HTML和CSS进行此操作,解决方法将使用JS,并使用CSS伪装占位符。
var input = document.getElementById("name");
input.onblur = function() {
if(!input.value) input.classList.remove('not-empty');
};
input.onfocus = function() {
input.classList.add('not-empty');
};
.input-container {
position: relative;
display: inline-block;
}
.input-container:before {
content: "name";
position: absolute;
left: 5px;
top: 0;
z-index: -1;
}
.input-container:after {
content: "nombre";
position: absolute;
top: 0;
right: 5px;
z-index: -1;
}
.input-container input {
z-index: 1;
background: transparent;
}
.input-container input.not-empty {
background: white;
}
<div class="input-container"><input id="name" type="text" name="name"></div>
shruti
检查解决方案
If you satisfied please give me vote as a gift :)
$(document).ready(function(){
$("input").click(function(){
$("label").hide();
});
$("input").focusout(function(){
if($(this).val() !=''){
} else{
$("label").show();
}
});
});
p{position: relative; display: inline-block;}
label[for="english"] { position: absolute;left: 4px;}
label[for="spanish"] {position: absolute; right: 4px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p>
<label for="english">Name </label>
<label for="spanish">Nombre</label>
<input type="text" nam="name">
</p>
我认为最干净的方法是:
$(document).ready(function() {
$('input').focus(function() {
$('label').addClass("focus");
})
$('input').blur(function() {
if(!$(this).val()) {
$('label').removeClass("focus");
}
})
});
.input-group {
position: relative;
display: inline-block;
}
label {
pointer-events: none;
}
label.focus {
display: none;
}
label.english {
position: absolute;
left: 4px;
}
label.spanish {
position: absolute;
right: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<label class="english" for="name">Name</label>
<label class="spanish" for="name">Nombre</label>
<input id="name" type="text" name="name">
</div>
为什么要使用标签?
&amp;有关多个标签的一些文档