Tips for centering text within a placeholder

Question

Tips for centering text within a placeholder

Currently, I have an input field with a placeholder that contains both English and Spanish text. My challenge is aligning the English text to the left and the Spanish text to the right within the placeholder. Here's an example of what I'm currently doing:

Example:

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

I attempted to use non-breaking spaces (nbsp) in my code, but when viewed on another window or in responsive mode, the text either overflows or does not align properly. Can someone please provide guidance on how to correctly align text within a placeholder to the left and right? Thank you for your assistance.

jquery html css

Answer 1

Answer №1

To achieve this effect, pure HTML and CSS alone are not sufficient. A workaround would involve using JavaScript to mimic a placeholder behavior with CSS. Here is an 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>

Answer 2

To achieve this effect, pure HTML and CSS alone are not sufficient. A workaround would involve using JavaScript to mimic a placeholder behavior with CSS. Here is an 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>

Answer 3

Answer №2

Shruti

Verify solution

If you are satisfied, please consider giving me a vote as a token of appreciation :)

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

Answer 4

Shruti

Verify solution

If you are satisfied, please consider giving me a vote as a token of appreciation :)

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

Answer 5

Answer №3

In my opinion, the most efficient method is as follows:

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

The Importance of Using Labels
& Additional Resources on Adding Multiple Labels to Input Fields

Answer 6

In my opinion, the most efficient method is as follows:

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

The Importance of Using Labels
& Additional Resources on Adding Multiple Labels to Input Fields

Tips for centering text within a placeholder

Answer №1

Answer №2

Answer №3

Similar questions

Tips for creating two columns within a Bootstrap row, one with a form and the other with an image, that are both the same height and responsive

Steps for executing ASP code pulled from the database

Assistance Required for Troubleshooting Error in Codeigniter Ajax

When I press the play button, the sound doesn't start playing

Customizable form with dynamic content and interactive button within a set location

Creating round corners for images with jQuery

What is the best way to choose dynamic content?

Using jQuery to access the data attribute values

The resource was recognized as a stylesheet but was delivered with the MIME type text/plain in golang

Mystery of the Unresponsive MD Ripple Button

The form contains an HTML table, but unfortunately, the buttons are not functioning as expected

Using jQuery to extract a href URL from a div tag with jQuery

The parseJSON function is not compatible with AJAX requests

Is less.js capable of compiling CSS code that is compatible with all browsers?

Ways to center align text in a div vertically

Passing data from PHP to jQuery through Ajax by returning an array

Fluid layout causing elements in body to be hidden by fixed header

What benefits does a dynamic website like this offer compared to one that is purely AJAX-based?

Exploring the font variables in the asset pipeline of Rails 7

Pressing a specific button triggers a broadcast signal, prompting a modal window to pop up and display relevant information