focus/select next text field automatically

Question

Here is a code that I am using in my current project. There are two fields to enter numbers each allows max 3 digits. I would like to automatically switch to second text field on completing first field with 3 digits. How can I do that ?

I found lots of example for input fields but as here I am using <td> I couldn't find a solution myself.

https://jsfiddle.net/shijilt/54918g3s/

<div class="content">
<div class="content mb-0 mt-3">
<div class="row mb-0">
<div id="add-product">
    <table cellpadding="10" cellspacing="1">
        <tbody>
            <tr>
                <th><h6 class="font-14"><strong>Number</strong></h6></th>
                <th><h6 class="font-14"><strong>Count</strong></h6></th>
            </tr>
            <tr>
        <td contentEditable="true" inputmode="numeric" data-id="lot_number_3" data-length="3" class="test"><h3 class="color-green-dark mb-0"></h3></td>
        <td contentEditable="true" inputmode="numeric" data-id="lot_count_3"data-length="3" class="test"><h3 class="color-red-dark mb-0">1</h3></td>
            </tr>
        </tbody>
    </table>
    

</div>

</div>
</div>

</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$('td[contentEditable="true"]').on("keydown", e => {
  // define allowed keys
  const allow = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Tab', 'Backspace']
  // get pressed key
  const k = e.key
  if (allow.includes(k)) {
    // get the value before this keydown
    const val = e.target.textContent

    // determine the limit according to your logic
    const limit = Number(e.target.dataset['length']);

    if (val.length == limit && 'Tab' != k && 'Backspace' != k) {
      // pressing this key would put the value over the limit
      e.preventDefault()
      console.log('deny: ' + k, val, limit)
    } else
      console.log('allow: ' + k, val, limit)

  } else {
    // key not allowed
    e.preventDefault()
    console.log('deny: ' + k)
  }

})
</script>

try using `val.trim().length`, your `td` textContent contains a lot of empty spaces. — GrafiCode, Oct 09 '22 at 09:43
Does this answer your question? [Set focus on div contenteditable element](https://stackoverflow.com/questions/2388164/set-focus-on-div-contenteditable-element) — Jorge Fuentes González, Oct 09 '22 at 09:48
Just look for a "set focus on contenteditable" element and for a "how to detect when an input has 3 digits". `input` and `contenteditable` works almost the same actually. — Jorge Fuentes González, Oct 09 '22 at 09:50

score 0 · Accepted Answer · answered Oct 09 '22 at 09:50

Use trim() on val, because your div text contains many empty spaces: val.trim().length.

Then, you can move the focus on the next td with $(this).next('td')[0].focus() where you check the length of the input.

$('td[contentEditable="true"]').on("keydown", function(e) {
  // define allowed keys
  const allow = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Tab', 'Backspace']
  // get pressed key
  const k = e.key
  if (allow.includes(k)) {
    // get the value before this keydown
    const val = e.target.textContent


    // determine the limit according to your logic
    const limit = Number(e.target.dataset['length']);



    if (val.trim().length == limit && 'Tab' != k && 'Backspace' != k) {
      // pressing this key would put the value over the limit
      e.preventDefault()
      console.log('deny: ' + k, val, limit)
      if ($(this).next('td').length > 0) {
        $(this).next('td')[0].focus()
      }
    } else
      console.log('allow: ' + k, val, limit)

  } else {
    // key not allowed
    e.preventDefault()
    console.log('deny: ' + k)
  }

})

#add-product table {
  width: 100%;
  background-color: #F0F0F0;
}

#add-product table th {
  text-align: center;
}

#add-product table td {
  background-color: #FFFFFF;
  border-bottom: #F0F0F0 1px solid;
  text-align: center;
  word-break: break-all;
  max-width: 10px;
  vertical-align: top;
}

#list-product table {
  width: 100%;
}

#list-product table th {
  border-bottom: #F0F0F0 2px solid;
  text-align: left;
}

#list-product table td {
  border-bottom: #F0F0F0 1px solid;
  text-align: left;
  word-break: break-all;
  max-width: 10px;
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="content mb-0 mt-3">
    <div class="row mb-0">
      <div id="add-product">
        <table cellpadding="10" cellspacing="1">
          <tbody>
            <tr>
              <th>
                <h6 class="font-14"><strong>Number</strong></h6>
              </th>
              <th>
                <h6 class="font-14"><strong>Count</strong></h6>
              </th>
            </tr>
            <tr>
              <td contentEditable="true" inputmode="numeric" data-id="lot_number_3" data-length="3" class="test">
                <h3 class="color-green-dark mb-0"></h3>
              </td>
              <td contentEditable="true" inputmode="numeric" data-id="lot_count_3" data-length="3" class="test">
                <h3 class="color-red-dark mb-0">1</h3>
              </td>
            </tr>
          </tbody>
        </table>


      </div>

    </div>
  </div>

</div>

Carsten Massmann · Answer 2 · 2022-10-09T14:55:39.710

This is a late contribution to an already answered question. I am posting it here since I spent some time on putting it together.

The main effort went into accepting the non-ideal markup as it is (having contenteditable elements with nested elements inside them) and making it safe against any kind of user input. A common problem of contenteditable elements with nested internal structures is that the user can easily delete anything that is defined inside the structure. It would be very hard to provide safeguards against this from happening. Instead I decided to manipulate the DOM by transferring the contenteditable and other related attributes to the closest nested elements that don't have any children. It is these elements that I then collect in the array eds (editable elements).

In the second part I then add event listeners for the "input" event unto the elements of eds. I chose "input" over "keyup" as it also takes care of mouse triggerred paste events.

// Preprocessing: transfer contenteditable attributes to innermost child elements:
const eds=[...document.querySelectorAll("tbody [contenteditable=true]")].map(e=>{
  // find the innermost childless element:
  const ed=e.querySelector("*:not(:has(*))");
  if (ed){
   e.getAttributeNames().filter(a=>a!="class").forEach(a=>
    (ed.setAttribute(a,e.getAttribute(a)),
     e.removeAttribute(a)))
  }
  return ed ?? e;
});

eds.forEach((c,i)=>c.addEventListener("input",()=>{
 const l=c.dataset.length,cl=c.textContent.length;
 if(cl>=l){
  // set cursor into next editable field (at the end of the input string):
  setCaret(eds[(i+1)%eds.length]);
  // limit the input to l digits:
  c.textContent=c.textContent.slice(0,l);
 }
}));  

function setCaret(el) {
  const range = document.createRange(),
    sel = window.getSelection();
  range.setStart(el,el.childNodes.length); 
  sel.removeAllRanges()
  sel.addRange(range)
}

<div class="content">
<div class="content mb-0 mt-3">
<div class="row mb-0">
<div id="add-product">
    <table cellpadding="10" cellspacing="1">
        <tbody>
            <tr>
                <th><h6 class="font-14"><strong>Number</strong></h6></th>
                <th><h6 class="font-14"><strong>Count</strong></h6></th>
            </tr>
            <tr>
        <td contentEditable="true" inputmode="numeric" data-id="lot_number_3" data-length="3" class="test"><h3 class="color-green-dark mb-0">78</h3></td>
        <td contentEditable="true" inputmode="numeric" data-id="lot_count_3"data-length="3" class="test"><h3 class="color-red-dark mb-0">1</h3></td>
            </tr>
        </tbody>
    </table>
</div>
</div>
</div>
</div>

focus/select next text field automatically

2 Answers2