Clash Royale CLAN TAG#URR8PPP

Show last 3 characters in an input only on focus?

I have inputs with hours and minutes in them, but I only want the minutes to show up if the input is focused. Is this possible?

My current approach uses jQuery to add the full time, but it would be ideal to have the full time as the value the whole time and just show what is necessary.

Also the cursor doesn't end up where you click in the input because of this (the cursor shows up at the end instead. At least in FF).

Other smarter ideas? It's not possible to do it just with css right? Set the color of the last 3 characters to transparent or similar 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" />

3 Answers
3

To get the cursor to be in the right place, you can use a fake form field. This is mostly CSS and only JS to sync up the fields. (From your example I assume you meant you want only hours to show up, not only 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>

HTML:

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


And some JavaScript:

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;



Example: http://jsbin.com/rumaveguwe/1/edit?html,js,console,output

Simply have a .focus and blur option and use the one time ("12:30") but in the .blur() option - split it at the ":" and display just the first part.

Try focussing in and out of the field to see this in action.

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.