Is it possible to set the maximum length of text in a TextArea?
Something interesting is that HTML5 have added the feature of maxlength to textarea, if HTML5 is something you are ok to use right now.
W3C official documentation
Demo:
<textarea maxlength="20"></textarea>
You can use following format in HTML
<input type="text" maxlength="13">
If you are using jQuery, use this plugin
http://www.stjerneman.com/demo/maxlength-with-jquery
This solution is re-usable for all text areas via one function and
it doesn't inform the user that he/she is typing too many characters, it prevents them from doing so, sort of like maxlength
The Function:
<script language="javascript" type="text/javascript">
function imposeMaxLength(Object, MaxLen)
{
return (Object.value.length <= MaxLen);
}
</script>
Implementation:
<textarea name="myName" onkeypress="return imposeMaxLength(this, 15);" ><textarea>
The Textarea doesn't accept the maxlength.
I have created a javascript function to handle this on onchange event. On one of my solutions I avoid the submit on form onsubmit event.
The code bellow will avoid submit if the textarea has more than 255 caracters
<script>
function checkSize(){
var x = document.getElementById('x');
return x.value.length <= 255;
}
</script>
<form onsubmit="return checkSize()">
<textarea id="x"><textarea>
</form>
Related
I am working on a Chrome Packaged App so my code should only work in Chrome.
I have the following input
<input type="date" />
https://jsfiddle.net/jhbo4q2k/
On Chrome this automatically adds a DatePicker. I would like to only keep this Datepicker and disable the input by keyboard.
Is this possible?
EDIT:
The accepted answer works. Just be wary of this
https://developer.chrome.com/extensions/tut_migration_to_manifest_v2#inline_scripts
You cant use inline scripts in a packaged app.
You can use onkeydown and prevent user from entering the value.
<input type="date" onkeydown="return false" />
For ReactJS above solutions don't work
I had to do:
<input type="date" onKeyDown={(e) => e.preventDefault()} .... />
Hi you can prevent keyboard popup by using onfocus="blur()". Since when the element has the focus we will remove the focus out of it(native keyboards won't show) however with onclick we can continue with our operations.
<input type="date" class="form-control" onfocus="blur()" onclick="dosomework()" name="some-name" id="some-id" >
<script>
function dosomework(){
alert('hi');
}
<script>
If using django forms;
datetime = forms.DateTimeField(widget=forms.DateTimeInput(attrs={
'onkeydown': 'return false' # If you want to disable the keyboard
"onfocus": 'blur()' # If you also want to disable virtual keyboard(on smartphones).
}))
OR
document.getElementById('id_datetime').onkeydown = (e) => {
e.preventDefault();
}
document.getElementById('id_datetime').setAttribute('onfocus', 'blur()');
Django simply adds 'id' in front of the input field name and sets that as its id. Here the input field name is datetime, so the id will be id_datetime.
Easy Way To Enable & Disable Input Date:
Step 1: create input date.
<input type="date" id="dateEnd">
Step 2: create enable and disable button
<button onclick="disableBtn()">Disable Date Field</button>
<button onclick="undisableBtn()">Undisable Date Field</button>
Step 3: Javascript for enabling and disabling
<script>
function disableBtn() {
document.getElementById("dateEnd").disabled = true;
}
function undisableBtn() {
document.getElementById("dateEnd").disabled = false;
}
</script>
Hope, this may help you.
e.preventDefault() will do the job...
const inputDate = document.querySelector("input");
inputDate.addEventListener("keydown", function (e) {
e.preventDefault();
});
<input type="date">
Disabling keyboard input is a great way to make your application less accessible to people with disabilities and make it less user friendly in general, in my opinion keyboard input is much easier to use than date pickers, especially if the expected format is clear. You'd be better off doing some basic field validation to ensure that the input is sensible before letting it be submitted, the HTML date field already has strong validation on it by default on Chrome Firefox and Edge.
I'd like to change the font size into an <input type="text" size="10> dynamically to fill the box. Here are some examples:
With less chars:
With more chars:
Is it possible?
I know JQuery and JavaScript weren't mentioned or tagged, but what you want will need JavaScript, and the JQuery.InputFit plugin will do exactly what you want:
<input type="text" name="younameit" id="input">
<script type="text/javascript">
$('input').inputfit();
</script>
I'm a little late to this question, but I want offer a solution in case you don't want to implement jquery just for this:
<p>A function is triggered when the user releases a key in the input field. The function transforms the characters size.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
function myFunction(){
var x=document.getElementById("fname");
var initialSize=25-x.value.length;
initialSize=initialSize<=10?10:initialSize;
x.style.fontSize = initialSize + "px";
}
check out this jsfiddle
Can <div contenteditable="true">Some Text</div> be used instead of texarea and then passed trough form somehow?
Ideally without JS
Using HTML5, how do I use contenteditable fields in a form submission?
Content Editable does not work as a form element. Only javascript can allow it to work.
EDIT: In response to your comment... This should work.
<script>
function getContent(){
document.getElementById("my-textarea").value = document.getElementById("my-content").innerHTML;
}
</script>
<div id="my-content" contenteditable="true">Some Text</div>
<form action="some-page.php" onsubmit="return getContent()">
<textarea id="my-textarea" style="display:none"></textarea>
<input type="submit" />
</form>
I have tested and verified that this does work in FF and IE9.
You could better use:
<script>
function getContent(){
document.getElementById("my-textarea").value = document.getElementById("my-content").innerText;
}
</script>
NOTE: I changed innerHTML to innerText. This way you don't get HTML elements and text but only text.
Example: I submited "text", innerHTML gives the value: "\r\n text". It filters out "text" but it's longer then 4 characters.
innerText gives the value "text".
This is useful if you want to count the characters.
Try out this
document.getElementById('formtextarea').value=document.getElementById('editable_div').innerHTML;
a full example:-
<script>
function getContent() {
var div_val = document.getElementById("editablediv").innerHTML;
document.getElementById("formtextarea").value = div_val;
if (div_val == '') {
//alert("option alert or show error message")
return false;
//empty form will not be submitted. You can also alert this message like this.
}
}
</script>
`
<div id="editablediv" contenteditable="true">
Some Text</div>
<form id="form" action="action.php" onsubmit="return getContent()">
<textarea id="formtextarea" style="display:none"></textarea>
<input type="submit" />
</form>
`
Instead of this, you can use JQuery (if there is boundation to use JQuery for auto-resizing textarea or any WYSIWYG text editor)
Without JS it doesn't seem possible unfortunately.
If anyone is interested I patched up a solution with VueJS for a similar problem. In my case I have:
<h2 #focusout="updateMainMessage" v-html="mainMessage" contenteditable="true"></h2>
<textarea class="d-none" name="gift[main_message]" :value="mainMessage"></textarea>
In "data" you can set a default value for mainMessage, and in methods I have:
methods: {
updateMainMessage: function(e) {
this.mainMessage = e.target.innerText;
}
}
"d-none" is a Boostrap 4 class for display none.
Simple as that, and then you can get the value of the contenteditable field inside "gift[main_message]" during a normal form submit for example. I'm not interested in formatting, therefore "innerText" works better than "innerHTML" for me.
How to refresh a web page in html when the text box value change dynamically?
I think you want the onChange javascript event.
<SCRIPT TYPE="text/javascript">
<!--
function checkEmail(mytext)
{
if(mytext.length == 0)
{
alert("You didn't type anything!");
}
}
//-->
</SCRIPT>
<FORM>
<INPUT NAME="email" onChange="doStuff(this.value)">
</FORM>
set document location to current value, and it will refresh!
document.location=document.location
Changing the value property of an input element will not trigger its onchange() handler.
You can reload the page with window.location.reload().
Per user's additional info in the comment, it sounds like -any- change needs an action.
This sounds very similar to this question: (whose title is misleading; no jquery is needed)
How to detect a textbox's content has changed
It seems like the best way to do it is by using window.setInterval to poll the field, and if it changes from its original value, call window.location.reload(). 500ms for setInterval is probably plenty fast enough.
So:
<SCRIPT TYPE="text/javascript">
<!--
function doStuff()
{
var myElement = document.getElementById("stuff");
if(myElement.length > 0)
{
window.location.reload();
}
}
//-->
</SCRIPT>
<BODY onload="self.setInterval('doStuff()',500)">
<FORM>
<INPUT TYPE="text" ID="stuff" NAME="stuff">
</FORM>
</BODY>
On one of my websites I have created a form that collects the persons name, email and a description of their idea.
I limited the characters of the description to 500 characters as I don't want to read a ton and I figured out how to have the text appear in the textarea before the user inputs what they want.
Currently the user has to delete "Description of your idea" themselves but I want to add the placeholder class where it deletes what I have written in the textarea when they click the textarea
I have looked on a few sites and couldn't figure out how to use it I placed it in my code, but usually the class just appeared as text inside my textarea.
Any help on using this class would be great thank you
Here is what I have written
Inside the head tags
<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
</script>
Inside the body tags
<form name="form1" method="post" action="ideas.php">
Your Name: <input type="text" name="name"><br>
Your Email: <input type="text" name="email"<br>
<textarea name="desc" cols=50 rows=10 onKeyDown="limitText(this.form.desc,this.form.countdown,500);"
onKeyUp="limitText(this.form.desc,this.form.countdown,500);">Description of your idea</textarea><br>
<font size="1">(Maximum characters: 500)<br>
You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font>
<br>
<input type="submit" name="Submit" value="Submit!"> </form>
There is a feature in HTML5 called 'placeholders', which produces exactly this feature without you having to do any coding at all.
All you need to do is add a placeholder attribute to your form field, like so:
<input type='text' name='name' placeholder='Enter your name'>
Sadly, of course, only a few browsers currently support it, but give it a go in Safari or Chrome to see it in action. The good news is that it is being added to virtually all browsers in the near future.
Of course, you still need to cater for users with older browsers, but you may as well make use of the feature in browsers that can use it.
A good way to deal with it is to use the placeholder attribute, and only fall back to the Javascript solution if the browser doesn't support the feature. The Javascript solution can take the text from the placeholder attribute, so you only need to specify it in one place.
See this page for how to detect whether the placeholder feature is supported: http://diveintohtml5.ep.io/detect.html
(or, as it says on that page, just use Modernizr)
The Javascript fall-back code is fairly simple to implement. Exactly how you do it would depend on whether you want to use JQuery or not, but here are links to a few examples:
http://www.morethannothing.co.uk/2010/01/placeholder-text-in-html5-a-js-fallback/
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
And of course Google will give you loads more if you search for html5 placeholder fallback or something similar.
Hope that helps.
Check out http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html I think it has what you are looking for.
Here is a simple page that has an email field on it that I quickly put together (pulled mostly from the tutorial).
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Focus auto-focus fields
$('.auto-focus:first').focus();
// Initialize auto-hint fields
$('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
if($(this).val() == $(this).attr('title')){
$(this).val('');
$(this).removeClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
if($(this).val() == '' && $(this).attr('title') != ''){
$(this).val($(this).attr('title'));
$(this).addClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
if($(this).attr('title') == ''){ return; }
if($(this).val() == ''){ $(this).val($(this).attr('title')); }
else { $(this).removeClass('auto-hint'); }
});
});
</script>
</head>
<body>
<form>
Email: <input type="text" name="email" id="email" title="i.e. me#example.com" class="auto-hint" />
</form>
</body>
</html>
The title text is put in the field if it's empty, and removed once the user starts typing.