Disable Paste action using Javascript (without include Jquery) - javascript

I have a text box for the login mobile number, I have to disable the paste action
Am working in ReactJs, The code that I used is Mention below.
<input
type="text"
name="userName"
placeholder="Mobile number"
onChange={e => this.onChangeNumber(e)}
value={this.state.userName}
maxLength="10"
autoFocus
autoComplete="off"
/>
I want to disable the paste action using the JS code without using jquery and any other packages. Anyone help me to complete this.
Thanks in Advance.

If you are using the reactjs, you can directly use the onPaste event in the input tag as given below. So it will restrict the paste action.
<input
type="text"
name="userName"
placeholder="Mobile number"
onChange={e => this.onChangeNumber(e)}
onPaste={e => {e.preventDefault()}}
value={this.state.userName}
maxLength="10"
autoFocus
autoComplete="off"
/>
If you want use the js, you can use the following code in your function. So that the paste action will get prevented.
onChangeNumber =()=>{
document.getElementByName('userName').onpaste=function(e){
e.preventDefault();
}
}

One of the many ways to do this is like
useEffect(()=>{
document.getElementById('ipt').onpaste=function(e){
e.preventDefault();
}
},[])
return (
<div className="App">
<input
type="text"
name="userName"
placeholder="Mobile number"
id='ipt'
autoFocus
autoComplete="off"
/>
</div>
);
}
Why useEffect used ?
So, that the DOM element input has initialised and does not return NULL when we document.getElementById it.
NOTE: It is generally not advisable to restrict pasting to an input field. It is annoying and affects the User Experience.
PS: I am not exactly sure why refs dont work with onpaste. maybe that would be a better REACTish way of doing it.

<input
type="text"
name="userName"
placeholder="Mobile number"
onChange={e => this.onChangeNumber(e)}
onPaste={e => {e.preventDefault()}}
value={this.state.userName}
maxLength="10"
autoFocus
autoComplete="off"
/>
Simply preventing default action onPaste would do needful.

<input type="text" class="word"> //html code
let box = document.querySelector(".word");// javacript method
//Disable Paste Event
box.onpaste = function () {
return false;
}

Related

Removing input autocomplete, in javascript and html doesn't work

I have a form and add text style in the input, if user click the input, the text shrink and goes up. It's working good till google autocomplete remember username and password, the autocomplete is messing the style.
So far I tried using autocomplete="off", but doesn't work:
<input type="text" autocomplete="off" class="form-control" size="15" name="login" id="login" required/>
<input type="password" autocomplete="off" size="15" class="form-control" name="password" id="password" required/>
Also I tried using js, but doesn't work as well:
function connectForm() {
document.querySelector(".totalconnect_form").autocomplete = "off";
}
connectForm();
Is there a way to solve this? to remove the autocomplete?
Or if not possible, I can use js using condition, but I'm not sure how to target the autocomplete in js, any advice will be helpful, thanks.

Need to get the value of an input, is there a getElementById react equivalent?

I need to get the input from the user using an HTML form but I'm not sure what the react equivalent of getElementById is... how can I accomplish this without going into the DOM?
(speak in layman's terms please I'm new)
<input id="city" type="text" name="city" />
In react I usually set up event listeners on my inputs that handle state changes.
handleChange = (inputValue) => {
this.setState({inputValue})
}
<input
id="city"
type="text"
name="city"
onChange={ e => this.handleChange(e.target.value)}
value={this.state.inputValue}
/>

how to hide required pop-up of input in html

hide pop-up of required of input using javascript jsfiddle
try to submit with empty input and see the pop-up, so i don't need to display that pop-up and i want the required to validate.
any help i don't need to display any warning.
<form>
<input type="text" name="name" required="required" value="" />
<input type="submit" name="submit" value="Submit" />
Since this is a HTML5 Event you can prevent the event from triggering the popup and still provide validation (https://developer.mozilla.org/en-US/docs/Web/Events/invalid). A simple event listener will do the job.
To handle focus include an id to that field like so ...
HTML
<input type="text" id="name" name="name" required="required" value="" />
And handle that focus within the return function ...
JS
document.addEventListener('invalid', (function () {
return function (e) {
e.preventDefault();
document.getElementById("name").focus();
};
})(), true);
EDIT
Check it out
http://jsfiddle.net/rz6np/9/
autocomplete="off"
or
autocomplete="nope"
If autocomplete still works on an <input> despite having autocomplete="off", but you can change off to a random string, like nope.
It appears that Chrome now ignores autocomplete="off" unless it is on the <form>-tag.

onkeypress is working but onblur is not

I am using the below input field. Here the onkeypress is working fine for tab key and enter key but when I am trying to just create a alert form onblur it is not working at all. I moved the cursor pinting to another input field by mouse click but onblur is not firing at all.
<input autocomplete="off" type="text" name="username" id="username" maxlength="10" onkeypress="isDouble(document.getElementById('username'),event)" onblur="alert(1)" required/>
Not sure if I am missing anything. Thanks in advance.
These all work, so not sure where the discrepancy is with the rest of your code and the input you provided.
<input onfocus="console.log('focus')" onkeyup="console.log('keyup')" onblur="console.log('blurred')" type="text">
<input autocomplete="off" type="text" name="username" id="username" maxlength="10" onkeypress="isDouble(document.getElementById('username'),event)" onblur="alert(1)" required/>
This works:
(both onblur and isDouble fire):
function isDouble(arg) {
alert('isDouble');
return false; // remove this, and only isDouble() will fire.
}
Check this out
http://jsfiddle.net/78N9A/1/ it seems to working
<input autocomplete="off" type="text" name="username" id="username" maxlength="10" onkeypress="isDouble(document.getElementById('username'),event)" onblur="alert(1)" required/>

Fire up ajax request when some inputs has changed

I have the following inputs:
<input class="input-text" type="text" name="nombres" id="nombres" />
<input class="input-text" type="text" name="apellidoP" id="apellidoP" />
<input class="input-text" type="text" name="apellidoM" id="apellidoM" />
<input class="input-text" type="text" name="nacimiento" id="nacimiento" />
I want to make an ajax request when the "nombres" and "nacimiento" inputs has changed and are not empty, and when "apellidoP" or "apellidoM" also has changed and are not empty.
How can I do that with jQuery? The only solution I have in mind is to trigger "change" event of every input and check if conditions are met, do you have another solution?
Thanks
If you are only interested in completed changes to field values you may want to look into jQuery's blur handler.
That's generally the way you will do it, check for the requirements in the change event.
Your talking about javascript events. Check this out: http://www.w3schools.com/js/js_events.asp
The following would execute checkEmail() whenever you changed something. Just check the text value of the input element in your function before doing whatever you wanted.
<input type="text" size="30" id="email" onchange="checkEmail()" />
$('#nombres').change(function(){
if($(this).val() !== '') {
//function to execute
}
});
Same applies for apellidoP and apellidoM.

Categories