How to Use Square Cursor in a HTML Input Field

How to use square cursor in a HTML input field?

Sample

I've changed how it works, and it seems to solve a few issues :)

• Accepts any text a normal input can
• Backspace works
• Theoretically can support pasting text

Usual caveats apply still, most notably the inability to visually see where the caret is.

I'd think long and hard whether this solution is worth implementing, based on its drawbacks and usability issues.

$(function() {  var cursor;  $('#cmd').click(function() {    $('input').focus();    cursor = window.setInterval(function() {      if ($('#cursor').css('visibility') === 'visible') {        $('#cursor').css({          visibility: 'hidden'        });      } else {        $('#cursor').css({          visibility: 'visible'        });      }    }, 500);
  });
  $('input').keyup(function() {    $('#cmd span').text($(this).val());  });
  $('input').blur(function() {    clearInterval(cursor);    $('#cursor').css({      visibility: 'visible'    });  });});

#cmd {  font-family: courier;  font-size: 14px;  background: black;  color: #21f838;  padding: 5px;  overflow: hidden;}#cmd span {  float: left;  padding-left: 3px;  white-space: pre;}#cursor {  float: left;  width: 5px;  height: 14px;  background: #21f838;}input {  width: 0;  height: 0;  opacity: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="cmd">  <span></span>  <div id="cursor"></div></div>
<input type="text" name="command" value="" />

How to move custom text cursor when typing in input box?

You need to get value of your input and put it inside a hidden div to get the clientWidth.

Make sure that you set the same font family and the same font size for your input and the div "mask" to make it work correctly.

I added +3 px to make a correction.

---

I used css css() for the left move.

let elemDiv = document.getElementById("mask"),
  elemInput = document.getElementById("typing");

elemInput.oninput = function() {
  elemDiv.innerText = elemInput.value;
  
  // css version
  $(".cursor i").css({"left":(elemDiv.clientWidth + 3) + "px"});
  
  // debug infos 
  console.clear();
  console.log((elemDiv.clientWidth + 3) + "px");
}

.cursor {
  position: relative;
}
.cursor i {
  position: absolute;
  width: 10px;
  height: 80%;
  background-color: blue;
  left: 5px;
  top: 10%;
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  opacity: 1;
}

#typing {
  width:100%;
  font-family:arial;
  font-size:12px;
}

#mask {
  font-family:arial;
  font-size:12px;
  width: auto;
  display: inline-block;
  visibility: hidden;
  position: fixed;
  overflow:auto;
}

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor">
<input type="text" id="typing" />
<i></i>
</div>
<div id='mask'></div>

How to move cursor small bit from left to right in a Input field

As @Rayon said, use padding style.

.list-name-field {  padding: 0 10px;}

<div style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; text-align: center; background-color: #ffffff; margin-top: 5px;">  <input class="list-name-field" id="SAVE_LIST" autofocus="autofocus" style="width: 230px; min-height: 35px; border: 0;" type="text" name="" placeholder="Add a List..."></div>

How to set cursor to input box in Javascript?

In JavaScript first focus on the control and then select the control to display the cursor on texbox...

document.getElementById(frmObj.id).focus();
document.getElementById(frmObj.id).select();

or by using jQuery

$("#textboxID").focus();

Changing Position of Cursor Between 2 Text Inputs in HTML Form

To focus onload:

window.onload=function() {
  document.getElementById("s").focus(); // remember IDs must be unique
}

Alternative if you have fields of same name:

window.onload=function() {
  document.getElementsByName("s")[0].focus(); // focus first of this name
}

---

But why two forms?

  <form role="search" action="/" method="get">
     <input type="search" id="s" name="s" class="s-input" required/>
     <input type="hidden" name="post_type" value="artist"/>
     <input type="submit" class="s-submit" value="Şarkıcı Ara" 
      onclick="this.form.post_type.value='artist'"/>
     <input type="submit" class="s-submit pos-center" value="Şarkı Ara" 
      onclick="this.form.post_type.value='lyrics'"/>
  </form>

---

Related Topics