0

I'm create input form where user can add some text. if input value is empty, submit button is disabled, if text is entered submit button is enabled. my created code is working well, but when I use mobile or Touch view (chrome dev. tools toggle device toolbar) is not working.I think problem is Touch but i cant solve it.

$('#imgText').on('keyup keypress', function() {
  if($(this).val().length >= 1) {
      $("#generate-img").removeClass("no-click");
    }
});
$('#imgText').on('keyup', function() {
  if($(this).val().length == 0) {
    $("#generate-img").addClass("no-click");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

enter image description here

Zakro Gogolidze
  • 39
  • 2
  • 4
  • 1
    croppie-generator.js throws the error, not jQuery. Please add a [mcve]. – Andreas Jun 14 '19 at 11:12
  • Who is "#imgText" and "#generate-img"? Please provide full code, I cannot help if I don't have all the data to reproduce the problem in jsFiddle. :( – Mara Black Jun 14 '19 at 11:12
  • If `$(this).val()` is undefined, just add this to your `if` statement: `if ($(this).val() && $(this).val().length >= 1...` – virgiliogm Jun 14 '19 at 11:14
  • In addition, the second on-keyup could be an `else` block in the first one – virgiliogm Jun 14 '19 at 11:15
  • There are no Keyup and KeyDown events available at mobile devices, you're event will never be fired on mobile devices. see here https://stackoverflow.com/questions/38989559/jquery-keyup-event-for-mobile-device/39031921 – Florian de Ville Jun 14 '19 at 11:15
  • thank you for answering me. on("input", function() is work well. – Zakro Gogolidze Jun 14 '19 at 12:09

2 Answers2

1

You could use jQuery's .on('input') method instead to catch changes made to field's value.

$(document).ready( function() {
  $('#imgText').on("input", function() {
    if($(this).val().length == 0) {
      $("#generate-img").addClass("no-click");
    } else {
      $("#generate-img").removeClass("no-click");
    }
  });
});
.no-click {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="imgText">
<input id="generate-img" type="submit" class="no-click">
Cray
  • 2,774
  • 7
  • 22
  • 32
1

You can use this method for mobile devices

$(document).ready( function() {
  $('#imgText').on("keyup input", function() {
    if($(this).val().length == 0) {
      $("#generate-img").addClass("no-click");
    } else {
      $("#generate-img").removeClass("no-click");
    }
  });
});
.no-click {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="imgText">
<input id="generate-img" type="submit" class="no-click">
Shahjehan Ali Chughtai
  • 347
  • 2
  • 13