Focus on minutes in time type input

Question

Is there any way to "focus" the minutes of a input of the kind time?

By default, the focus() direct to the "hours" that is the beginning of the input, empty or filled:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

  function foco(v) {
    if(v == 1) {
      $('#hora1').focus();
    } else {
      $('#hora2').focus();
    }
  }

</script>

<div class="container">

  <div class="row">
    <button class="btn btn-primary mr-2" onclick="foco(1)"><b>Foco 1</b></button>
    <button class="btn btn-primary" onclick="foco(2)"><b>Foco 2</b></button>
  </div>

  <br>

  <div class="row">

    <form id="formX" onsubmit="return false">

      <div id="reg" class="form-row">
        <div class="form-group mr-2">
          <label for="hora1">Hora 1</label>
          <input id="hora1" type="time" class="form-control"/>
        </div>
        <div class="form-group mr-2">
          <label for="hora2">Hora 2</label>
          <input id="hora2" type="time" class="form-control" value="10:10"/>
        </div>
      </div>

    </form>

  </div>
</div>

Answer 1

Is there any way to "focus" the minutes of a team-like input?

Programmatically does not exist. By focusing the element input time, the first value (representing the hours) is automatically selected. This is because the event focus is applied to the element itself (not parts of it or parts of its value). In the case of time the value of hours is selected by default, as you quoted.

As quoted by specification of the W3C, the user agent (browser) may or may not provide an interface to the time:

[...]If the user agent provides a user interface for Selecting a time[...]

Except for Internet Explorer, the other major browsers (Chrome, Firefox, Opera, Safari) provide an interface where the user can change the values using the keys ↑ or ↓, and the keys tab, ← and → to select the value to be changed. But this is only a feature of the browser, IE, is not part of a specification or standardization of HTML or Javascript, therefore, each manufacturer can render the input time to your liking (or doing nothing, as is the case with Internet Explorer, which shows the input time as if it were a input text).

See the differences between Edge and Opera, for example:

Edge:

Opera:

There are possible methods of selecting a part of the value of a input text, but shall not apply to input time, as also reported by the same W3C item:

The following IDL Attributes and methods do not apply to the element: checked, files, selectionStart, and selectionEnd IDL Attributes; select() and setSelectionRange() methods.

The above English text is basically saying that it is not possible to use Javascript methods to select all the value of the field or only a part, which is usually possible in a input text:

function sel(i){

   if(i == 1){
      $("[type=text]").select();
   }else{
      $("[type=time]").select();
   }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="sel(1)">Selecionar o input text abaixo</button>
<br>
<input type="text" value="10:10">
<br>
<em>Seleciona todo o valor do campo</em>
<br><br>
<button onclick="sel(2)">Selecionar o input time abaixo</button>
<br>
<input type="time" value="10:10">
<br>
<em>Apenas foca o campo, mas não seleciona todo o valor</em>

In short, there is no way to change this behavior that is proper to the browser; ie, focused the element, automatically the value of hours is selected.