0

I have a input type text where placeholder having two values like (English and spanish). but i want english text to be left align and spanish text should be right align but in my case i am doing this like .

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

Shruti
  • 149
  • 1
  • 9

3 Answers3

3

You can't do this with pure html and css, a workaround would be using js, and faking a placeholder behavior with css.. like the example..

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>
aroabarberan
  • 157
  • 1
  • 2
  • 10
Renzo Calla
  • 7,486
  • 2
  • 22
  • 37
2

Shruti

Check solution

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>
Anmol Ratan Mohla
  • 186
  • 2
  • 14
1

I think the cleanest way is this :

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

Why you should use label ?
& Some docs about multiple label

Sandwell
  • 1,451
  • 2
  • 16
  • 31
  • If you're going to do it this way you should set a rule on the `label` for the pointer-events property value to be none. Without this you have to click within the whitespace between the labels which is somewhat of a poor user experience. – Danny Apr 25 '18 at 13:12
  • You should add the js code to change the visibility of the `labels` to hidden when the input has focus and when it has text inside it. – Danny Apr 25 '18 at 13:18
  • This is a misuse of the `for` attribute on labels... `for` is supposed to point at the `id` attribute of the form element the label is associated with. – Scoots Apr 25 '18 at 13:25
  • 1
    Last one. On the blur event handler of the input put the removal of the class inside a if condition checking if the there is no text inside the input element, only then should you remove the `.focus` class: `if(!$(this).val())` – Danny Apr 25 '18 at 13:31