jquery - 如何对齐占位符内的文本

Question

我有一个输入类型文本，其中占位符具有两个值，如(英语和西类牙语)。 但我希望英文文本左对齐，西类牙文文本应右对齐，但就我而言，我是这样做的。

Example:

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

I am doing like this using nbsp but when i open this on another window or in responsive mode text getting outside or not aligned. so how can i align text inside placeholder to left and right please help me related this ..

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>