bank.teraren.com.html

<form>
  <input type="text" id="bank_code" placeholder="0001" max="9999" maxlength="4" min="0" autofocus>
  <input type="text" id="bank_name" placeholder="みずほ" disabled>
  <input type="text" id="branch_code" placeholder="001" maxlength="3" min="0" max="999">
  <input type="text" id="branch_name" placeholder="東京営業部" disabled>
</form>

bank.teraren.com.js

document.getElementById('bank_code').addEventListener('keyup', function(e) {

  if (!(48 <= e.keyCode && e.keyCode <= 57)) { // 0 - 9
    return;
  }

  const bank_code = e.target.value;

  if (bank_code.length != 4) {
    return;
  }

  const url = "https://bank.teraren.com/banks/" + bank_code+ ".json";
  fetch(url)
    .then(response => response.json())
    .then(json => {
      document.getElementById('bank_name').value = json.name;
    })
    .catch(error => {
      document.getElementById('bank_name').value = '';
      document.getElementById('branch_name').value = '';
    });
});


document.getElementById('branch_code').addEventListener('keyup', function(e) {

  const branch_code = e.target.value;
  if (branch_code.length != 3) {
    return;
  }

  const branch_url = "https://bank.teraren.com/banks/" + bank_code + "/branches/"+branch_code+".json";
  fetch(branch_url)
    .then(response => response.json())
    .then(json => {
      document.getElementById('branch_name').value = json.name;
    })
    .catch(error => {
      document.getElementById('branch_name').value = '';
    });

});