Question

我有一个输入类型文本，其中占位符有两个值，如（英语和西班牙语）。但我希望英文文本保持对齐，西班牙文本应该正确对齐，但在我的情况下，我这样做。

Example:

<input type="text" nam="name" placeholder="Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nombre" >

我正在这样做，但是当我在另一个窗口打开它时或者在响应模式文本中外出或不对齐。那么我怎样才能将占位符内的文本左右对齐请帮我解决这个问题..

Answer 1

你不能用纯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>

Answer 2

思鲁提

检查解决方案

If you satisfied please give me vote as a gift :)

＆＃13;

$(document).ready(function(){
		$("input").click(function(){
			$("label").hide();
		});
		$("input").focusout(function(){
        	if($(this).val() !=''){
				
				} else{
					$("label").show();
				}
				
				
    	});
	});

＆＃13;

p{position: relative; display: inline-block;}
	label[for="english"] { position: absolute;left: 4px;}
	label[for="spanish"] {position: absolute; right: 4px;}

＆＃13;

<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>

＆＃13;

Answer 3

我认为最干净的方法是：

＆＃13;

$(document).ready(function() {
  $('input').focus(function() {
    $('label').addClass("focus");
  })
  $('input').blur(function() {
    if(!$(this).val()) {
      $('label').removeClass("focus");
    }
  })
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Why you should use label ?
＆安培; Some docs about multiple label

如何在占位符内对齐文本

3 个答案: