Display the last 3 characters of an input field when it is in focus

Question

Display the last 3 characters of an input field when it is in focus

I want the minutes in my input to only show up when the input is focused. Can this be achieved?

Currently, I am using jQuery to display the full time, but I prefer to always have the full time as the value and only show what is necessary.

Another issue is that the cursor doesn't go where you click in the input field, it ends up at the end. This happens at least in Firefox.

Are there any smarter ideas to tackle this? Can it be done just with CSS, like setting the color of the last 3 characters to transparent when not focused?

$('input').on('focus', function(e) {
  var full_time = $(this).attr('data-full-time');
  $(this).val(full_time);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-full-time="12:30" data-short-time="12" value="12" />

javascript jquery css

Answer 1

Answer №1

If you need to position the cursor correctly, one trick is to utilize a dummy form field. This solution involves primarily CSS with a sprinkle of JavaScript to ensure the fields stay in sync. (Based on your query, it seems like you specifically desire only hours to be displayed, not just minutes.)

$('#real').on('input', function(e) {
  $('#fake').val($(this).val().split(':')[0]);
});

.input-container {
  position: relative;
}

.input-container input {
  position: absolute;
}

#fake {
  pointer-events: none;
}

#real {
  opacity: 0;
}

#real:focus {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-container">
  <input id="fake" type="text" value="12" />
  <input id="real" type="text" value="12:30" />
 </div>

Answer 2

If you need to position the cursor correctly, one trick is to utilize a dummy form field. This solution involves primarily CSS with a sprinkle of JavaScript to ensure the fields stay in sync. (Based on your query, it seems like you specifically desire only hours to be displayed, not just minutes.)

$('#real').on('input', function(e) {
  $('#fake').val($(this).val().split(':')[0]);
});

.input-container {
  position: relative;
}

.input-container input {
  position: absolute;
}

#fake {
  pointer-events: none;
}

#real {
  opacity: 0;
}

#real:focus {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-container">
  <input id="fake" type="text" value="12" />
  <input id="real" type="text" value="12:30" />
 </div>

Answer 3

Answer №2

Here's an example of using HTML and JavaScript together:

<input id="timeInput" value="12:30" onfocus="showMinutesOnly()" onblur="showWholeTime()"/>

In the accompanying JavaScript code:

var wholeTimeString;
var minutes;

function showMinutesOnly(){
  wholeTimeString = document.getElementById("timeInput").value;
  minutes = wholeTimeString.substring(wholeTimeString.indexOf(":")+1);

  document.getElementById("timeInput").value = minutes;
}

function showWholeTime(){
  document.getElementById("timeInput").value = wholeTimeString;
}

Take a look at the live demo: http://jsbin.com/rumaveguwe/1/edit?html,js,console,output

Answer 4

Here's an example of using HTML and JavaScript together:

<input id="timeInput" value="12:30" onfocus="showMinutesOnly()" onblur="showWholeTime()"/>

In the accompanying JavaScript code:

var wholeTimeString;
var minutes;

function showMinutesOnly(){
  wholeTimeString = document.getElementById("timeInput").value;
  minutes = wholeTimeString.substring(wholeTimeString.indexOf(":")+1);

  document.getElementById("timeInput").value = minutes;
}

function showWholeTime(){
  document.getElementById("timeInput").value = wholeTimeString;
}

Take a look at the live demo: http://jsbin.com/rumaveguwe/1/edit?html,js,console,output

Answer 5

Answer №3

To achieve this effect, incorporate a focus and blur option where the time is displayed once ("12:30") but when blurred, only the first part is shown.

Experiment by focusing in and out of the input field to observe the desired behavior.

$('input').on('focus', function(e) {
  var time = $(this).attr('data-time');
  $(this).val(time);
});

$('input').on('blur', function(e) {
  var time = $(this).attr('data-time').split(":")[0];
  $(this).val(time);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-time="12:30"  autofocus/>

Answer 6

To achieve this effect, incorporate a focus and blur option where the time is displayed once ("12:30") but when blurred, only the first part is shown.

Experiment by focusing in and out of the input field to observe the desired behavior.

$('input').on('focus', function(e) {
  var time = $(this).attr('data-time');
  $(this).val(time);
});

$('input').on('blur', function(e) {
  var time = $(this).attr('data-time').split(":")[0];
  $(this).val(time);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-time="12:30"  autofocus/>

Display the last 3 characters of an input field when it is in focus

Answer №1

Answer №2

Answer №3

Similar questions

Using jQuery and Ajax to submit a form in Rails applications

What is the best way to ensure elements are rendered in Vue only when they are fully prepared?

Steps for turning off the output in hook.io

Is there a way to keep left-aligned text centered even when it wraps around?

Event signaling the completion of an Ajax call

AngularJS app enhanced with personalized directive for drag and drop functionality

Failed to update the innerHTML attribute for the anchor tag

Prioritize loading images over loading any HTML elements

Tips for Sending Emails from an Ionic Application without Utilizing the Email Composer Plugin

Insert a new row in a table using jQuery

Animating jQuery Accordion in Horizontal Direction Extending to the Far Right

Library for Typescript in Microsoft MakeCode Minecraft

`Inconsistency in image width behavior observed in Opera browser`

Submit the form with an input value that is located outside of the form

methods for obtaining specific rows from a master table and a child table within a JTable

Integrate the elements from the <template> section into the designated <slot> area

I encountered an issue while attempting to establish a connection to an API using WebSocket. Specifically, I received an error message stating: "Uncaught ReferenceError

Creating a visually stunning image grid akin to the meticulously designed layouts found

Filtering out section boxes does not eliminate empty spaces

Struggling to get troika-three-text installed via npm?