how to specify amout of letters in inputfield in css
<input maxlength="25" placeholder="name" />how to specify amout of letters in inputfield in css
<input maxlength="25" placeholder="name" />input maxlength
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" maxlength="10"><br><br>
<input type="submit" value="Submit">
</form>text limit in html
<span style="
display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 13ch;">
Lorem ipsum dolor sit amet
</span>html input max vs maxlength
<input type="text" maxlength="4"/>html input max words
<p><input type="text" data-max-words="2" data-announce="true"></p>
<p><input type="text" data-max-words="3"></p>
<p><input type="text" data-max-words="4"></p>
<p><textarea data-max-words="100" rows="5" style="width:100%" data-announce="true"></textarea></p>html input max words
// Get all inputs that have a word limit
document.querySelectorAll('input[data-max-words]').forEach(input => {
// Remember the word limit for the current input
let maxWords = parseInt(input.getAttribute('data-max-words') || 0)
// Add an eventlistener to test for key inputs
input.addEventListener('keydown', e => {
let target = e.currentTarget
// Split the text in the input and get the current number of words
let words = target.value.split(/\s+/).length
// If the word count is > than the max amount and a space is pressed
// Don't allow for the space to be inserted
if (!target.getAttribute('data-announce'))
// Note: this is a shorthand if statement
// If the first two tests fail allow the key to be inserted
// Otherwise we prevent the default from happening
words >= maxWords && e.keyCode == 32 && e.preventDefault()
else
words >= maxWords && e.keyCode == 32 && (e.preventDefault() || alert('Word Limit Reached'))
})
})Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
