I am trying to edit the following input form to change the maxlength value.
<div id="chat-input">
<form class="chat-input-form" onsubmit="return false">
<input id="chat-input-field" value="" placeholder="Click here to join the conversation" maxlength="256" type="text">
</form>
</div>
Say I want to change the maxlength of the input to 300, how would I go about doing this client side? I know I can use inspect element, but I am trying to do it with a JavaScript file.
Pretty simple:
document.getElementById('chat-input-field').maxLength = 300
Don't forget to wrap the code inside of a document ready function. Something like this should do it, but stick to jQuery $(document).ready() if you want to support stone age browsers too.
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('chat-input-field').maxLength = 300
});
I don't think I would need to add the DOMContentLoaded because the javascript file I am using is only added after the website is finished loading.
Then try this.
console.log(document.getElementById('chat-input-field'));
document.addEventListener('DOMContentLoaded', function(){
console.log(document.getElementById('chat-input-field').maxLength);
});
Expected result in console:
null
256
onLoad statement. This might be suggesting you something.
document.getElementById('chat-input-field').maxLength = xxx;?