Accept letters and numbers in a text type input

Question

Accept letters and numbers in a text type input

Navigation

#1 by (4 votes)

2

Good morning, I have this code that only allows the use of numbers.

$('input[name="39"]').bind('keypress', function(e){
        var keyCode = (e.which)?e.which:event.keyCode
        return !(keyCode>31 && (keyCode<48 || keyCode>57)); 
});

but now I need you to accept numbers and letters, that is, after a certain event happens that the input returns to normal.

$('select#_38').on('change', function () {
        var varToTest = $(this).val();
        alert(varToTest)
        if (varToTest == 'nit'){
          $('input[name="39"]').bind('keypress', function(e) {
  var keyCode = (e.which) ? e.which : event.keyCode
  return !(keyCode > 31 && (keyCode < 48 || keyCode > 90) && (keyCode < 97 || keyCode > 122));
});
        }else{
          $('input[name="39"]').bind('keypress', function(e){
        var keyCode = (e.which)?e.which:event.keyCode
        return !(keyCode>31 && (keyCode<48 || keyCode>57)); 
});
        }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="38[]" id="_38" data-placeholder="Seleccionar" class="form-control">
                        <option value="ced" selected="selected">Cédula de Ciudadanía</option>
                    <option value="nit">NIT</option>
                    <option value="pasa">Pasaporte</option>
                    <option value="identi">Tarjeta de Identidad</option>
                    <option value="extra">Cédula Extranjería</option>
                </select>


<input id="39" name="39" type="text">

It does not correctly make the change, the idea is to allow letters and numbers when NIT is selected and any other numbers only

javascript jquery html

asked by David Davila 03.12.2018 в 23:10

source

1 answer

JavaScript 1e16 * Math.random () equivalent to PHP memset does not work with large numbers

score 4 · Accepted Answer

You just have to add the codes of the characters you want to the condition:

$('input[name="39"]').bind('keypress', function(e) {
  var keyCode = (e.which) ? e.which : event.keyCode
  return !(keyCode > 31 && (keyCode < 48 || keyCode > 90) && (keyCode < 97 || keyCode > 122));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="39" name="39" type="text">

Applied to your code, what you would do is declare a global variable called nitSeleccionado and when you change the value of the select use that variable as a flag that indicates the change. On the other hand, in input text I only check if the value of the variable has already changed.

var nitSeleccionado = false;

$('select#_38').on('change', function() {
  var varToTest = $(this).val();
  alert(varToTest)
  if (varToTest == 'nit') {
    nitSeleccionado = true;
  } else {
    nitSeleccionado = false;
  }
});

$('input[name="39"]').bind('keypress', function(e) {
  var keyCode = (e.which) ? e.which : event.keyCode
  if (nitSeleccionado) {
  	return !(keyCode > 31 && (keyCode < 48 || keyCode > 90) && (keyCode < 97 || keyCode > 122));
  } else {
    return !(keyCode > 31 && (keyCode < 48 || keyCode > 57));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="38[]" id="_38" data-placeholder="Seleccionar" class="form-control">
  <option value="ced" selected="selected">Cédula de Ciudadanía</option>
  <option value="nit">NIT</option>
  <option value="pasa">Pasaporte</option>
  <option value="identi">Tarjeta de Identidad</option>
  <option value="extra">Cédula Extranjería</option>
</select>

<input id="39" name="39" type="text">

Note: As a last point, I would prefer to change the validation of the keyboard to allow the use of the delete key, the arrow keys and and the ctrl / cmd key for greater freedom in the use of the input. Also empty the input every time the select changes. For compatibility with the phone it is necessary to use keydown instead of keypress :

var nitSeleccionado = false;

$('select#_38').on('change', function() {
  var varToTest = $(this).val();
  alert(varToTest);
  $('input[name="39"]').val("");
  if (varToTest == 'nit') {
    nitSeleccionado = true;
  } else {
    nitSeleccionado = false;
  }
});

$('input[name="39"]').bind('keydown', function(e) {
  var keyCode = (e.which) ? e.which : event.keyCode
  if (nitSeleccionado) {
  	return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[a-zA-Z0-9]/.test(String.fromCharCode(e.which)); // numbers
  } else {
    return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="38[]" id="_38" data-placeholder="Seleccionar" class="form-control">
  <option value="ced" selected="selected">Cédula de Ciudadanía</option>
  <option value="nit">NIT</option>
  <option value="pasa">Pasaporte</option>
  <option value="identi">Tarjeta de Identidad</option>
  <option value="extra">Cédula Extranjería</option>
</select>

<input id="39" name="39" type="text">