i am trying to limit the height of the dojo's dijit.Textarea by preventing users from hitting the enter key while typing. How can i prevent the enter key from being used? i have the below code but its not wroking.
<input type="text" dojoType="dijit.form.Textarea" maxLength="99" onkeydown="return noEnter" />
function noEnter(evt) { if (evt.keyCode == dojo.keys.ENTER) {
console.log('enter pressed');
evt.stopPropagation();
return false; }else{
console.log(evt.keyCode + ' pressed');
return true; }}
Dojo has a method that can be used for this purpose called stopEvent. Perhaps you could use it like this:
<input type="text" dojoType="dijit.form.Textarea" maxLength="99" onkeydown="noEnter" />
function noEnter(e){
if(e.keyCode == dojo.keys.ENTER){
dojo.stopEvent(e);
}
}
Use a dijit.form.SimpleTextarea which is a straight replacement for <textarea>, that is: it does not automatically adjust the height.
Related
why doesn't my function return an alert given this particular code?
function searchString() {
if (event.keyCode == alert("Success!"); }
}
Here is my HTML code:
<input type="text" id="searchString" name="searchString" onkeydown="searchString();"/>
You need to pass the event argument in your function. Otherwise event is undefined when you try to invoke the keyCode method:
function searchString(event) {
if(event.keyCode == 13) {
alert("Success!");
}
}
document.querySelector('input').addEventListener('keyup', searchString);
function searchString(event) {
if (event.keyCode == 13) {
alert("Success!");
}
}
<p>Press the <b>enter</b> key in the input below see your alert</p>
<input type="text" />
You can do it with pure javascript:
const search = document.getElementById('searchString');
search.addEventListener('keydown', (e) => {
if (e.keyCode === 13) {
// your code here
}
}
Note: 13 is the key code for the enter
You need to ensure that the actual event is being passed as an argument... otherwise, it will be unrecognised within the function. To see which code is tied to which key, please try the following.
function check(event)
{
var keycode = event.keyCode;
alert(keycode);
}
And then ...
<input type="text" id="check" name="check" onkeydown="check();">
The return key is tied with '13'. So if you just want to do something when it is pressed, do the following.
function searchString(event)
{
if(event.keyCode === 13) {
alert("return key was pressed");
// do something ....
}
}
And the html code should be something like the following.
<input type="text" id="searchString" name="searchString" onkeydown="searchString();">
Please note that I have used '===' instead of '=='. It is now the recommended practise. Also, note that the forward slash at the end of input is not necessary.
HTML:
<form name="prints" method="post" action="">
<input type="text" name="quantity_914" id="quantity_914" value="1" style="width:20px;" onblur="prints_change_quantity(event, this);" onkeyup="return prints_change_quantity(event, this); return false;" />
</form>
Javascript:
function prints_change_quantity(e, element)
{
var pid = element.id.replace('quantity_');
var code = (e.keyCode ? e.keyCode : e.which);
if("blur" == e.type || ("keyup" == e.type && code == 13))
{
e.preventDefault();
console.log(element.value);
}
return false;
}
Cancelling a keydown event won't stop a form from being submitted. You'll need to use keypress or keyup instead.
use the key press event rather using keyup.
<form action="#">
<input type="text" name="txt" onkeypress="handle" />
</form>
<script>
function handle(e){
if(e.keyCode === 13){
alert("Enter was pressed was presses");
}
return false;
}
</script>
If you want to use your existing function and don't want your form to submit you can just use jquery and prevent the form from submitting with your existing function.
Example
$(document).ready(function(){
$("#prints").submit(function (e) {
e.preventDefault(); // this will prevent from submitting the form.
});
});
I added an id of prints to the form alternatively you could use a name selector or some other selector...
Alternatively if you want to be able to submit the form at some point you could just add a jquery handler for keypress on the form and if its the return key cancel it.
$('#prints').keypress(function(e){
if ( e.which == 13 ) e.preventDefault();
});
Example 2
By default keyDown event is triggered when you hit enter for a html form. Whenever you attach an event to onkeyUp attribute the form takes the enter key action and submits the form as it has no effect, however if you explicitly specify onkeyDown event then your return prints_change_quantity(event, this); gets called and hence the form won't get submitted . Change your html code to call the JavaScript function as shown below:
<form name="prints" method="post" action="">
<input type="text" name="quantity_914" id="quantity_914" value="1" style="width:20px;" onblur="prints_change_quantity(event, this);" onkeydown="return prints_change_quantity(event, this); return false;" />
</form>
Hope this helps.
How to use enter key like tab in forms which is in bootstrap3 modal. Below code working properly in html forms, but not working in bootstrap modal
<script>
function OnKeyPress(field, event)
{
if (event.keyCode == 13) {
for (i = 0; i < field.form.elements.length; i++)
if (field.form.elements[i].tabIndex == field.tabIndex + 1) {
field.form.elements[i].focus();
if (field.form.elements[i].type == "text")
field.form.elements[i].select();
break;
}
return false;
}
return true;
}
</script>
The function is calling like this
<input type="text" class="form-control enter modal-count" id="Name" value="" tabindex="1" onKeyPress="return OnKeyPress(this, event)">
It seems that onkeyPress doesnt register all events like ESC etc ,
http://www.w3schools.com/jsref/event_onkeypress.asp
You can use onKeyDown but im wondering why you have return in there and not just the function immediately.
Trying to search online and can only find how to change field selection..
My question today is the opposite
Is it possible to not go to the next field on tab button press, if yes how can we do that.
Thanks!
$('#blockThisFieldID').keydown(function(objEvent) {
if (objEvent.keyCode == 9) { //tab pressed
objEvent.preventDefault(); // stops its action
return false;
}
})
$("#testform").on('keydown', 'input', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
}
});
<div id="testform">
<input type=text id=test1><br />
<input type=text id=test2><br />
<input type=text id=test3><br />
</div>
As seen in this fiddle
Can you change the tabIndex?
http://www.w3schools.com/tags/att_global_tabindex.asp
I have two fields, one is emailid and another is password in my form. I want to prevent the user from pasting into those fields. They should be forced to enter manually, like Google Forms.
2020 update
There are copy and paste events you can use to prevent these actions, or to modify the data being copied or pasted. (see the links for browser support)
<input type="text" onpaste="return false">
Or the longer javascript version:
const elem = document.getElementById('nopaste');
elem.addEventListener('paste', (event) => {
event.preventDefault();
});
<input type="text" placeholder="can paste"><br>
<input type="text" id="nopaste" placeholder="can not paste">
You could disable ctrl+v combination and right click as well.
for IE, you may tap into following event handlers:
onpaste="return false;"
oncut="return false;"
oncontextmenu="return false;"
oncopy="return false;".
Here is a workaround for all browsers:
function noCTRL(e) {
var code = (document.all) ? event.keyCode : e.which;
var ctrl = (document.all) ? event.ctrlKey : e.modifiers & Event.CONTROL_MASK;
var msg = "Sorry, this functionality is disabled.";
if (document.all) {
if (ctrl && code == 86) {
//CTRL+V
alert(msg);
window.event.returnValue = false;
} else if (ctrl && code == 67) {
//CTRL+C (Copy)
alert(msg);
window.event.returnValue = false;
}
} else {
if (ctrl == 2) {
//CTRL key
alert(msg);
return false;
}
}
}
In HTML section, your fields would look like:
Email :<input name="email" type="text" value=""/><br/>
Password :<input name="password" type="password" value=""/><br/>
Confirm Email :<input name="email" type="text" value="" onkeydown="return noCTRL(event)"/>
Confirm Password :<input name="password" type="password" value="" onkeydown="return noCTRL(event)"/>
I don't think user can copy password fields if input type is password
Hope this helps.
Note:
Disabling JavaScript in browser will let users do whatever they want
Always Keep this in mind: respect user's freedom.
You should use onpaste. The paste event fires when the user attempts to paste text.
HTML
<h3>Play with this text area:</h3>
<textarea id="editor" rows="3">Try copying and pasting text into this field!</textarea>
<h3>Log:</h3>
<p id="log"></p>
JavaScript
function logCopy(event) {
log.innerText = 'Copied!\n' + log.innerText;
}
function logPaste(event) {
log.innerText = 'Pasted!\n' + log.innerText;
}
const editor = document.getElementById('editor');
const log = document.getElementById('log');
editor.oncopy = logCopy;
editor.onpaste = logPaste;
2022 UPDATE:
For Input Elements to receive onChange event on paste action, mention onpaste option as below
<input onpaste='return true' onChange={handleChange}/>
Copy
document.addEventListener("copy", (e) => {
console.log("copy")
});
Paste
document.addEventListener("paste", (e) => {
console.log("paste")
});