CODEWITHSUNDEEP
javascriptjqueryhtmlbrowser
DBS
DBS

Reputation: 9984

Allow more than 524288 characters in a WebKit text input

Is there any way to increase Chromes default 524288 character limit for text input elements? (Seems to also occur in Safari, so I'm assuming it's WebKit related)

For context, I'm using this input to hold a base64 encoded image. Unfortunately I need to use an input element due to the situation, so just using a hidden element isn't an option.

To demonstrate, in WebKit browsers these number will not match, every other browser doesn't seem to limit the input. Is there a way to work around this?

$(document).ready(function(){
  // Build a really long string
  var reallyLongString = "abcdefghijklmnopqrstuvwxyz";
  for(var i = 0; i < 15; i++){
   reallyLongString = reallyLongString + reallyLongString;
  }

  // The important bit
  $("#inputElement").val(reallyLongString);
  $("#quantityDisplay").html(
    "Actual length: " + reallyLongString.length + 
    "<br />" +
    "Input length: " + $("#inputElement").val().length
  );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputElement" type="text" />
<div id="quantityDisplay"></div>

Upvotes: 0

Views: 474

Answers (2)

Sibevin Wang
Sibevin Wang

Reputation: 4538

You can use a hidden input instead if the value is from js not users.

Upvotes: 2

DBS
DBS

Reputation: 9984

It appears this restriction doesn't apply to the textarea element, which can be substituted in and will work correctly.

$(document).ready(function(){
  // Build a really long string
  var reallyLongString = "abcdefghijklmnopqrstuvwxyz";
  for(var i = 0; i < 15; i++){
   reallyLongString = reallyLongString + reallyLongString;
  }

  // The important bit
  $("#inputElement").val(reallyLongString);
  $("#quantityDisplay").html(
    "Actual length: " + reallyLongString.length + 
    "<br />" +
    "Input length: " + $("#inputElement").val().length
  );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="inputElement" type="text"></textarea>
<div id="quantityDisplay"></div>

Upvotes: 0

Related Questions