We Keep Coding

Disable Paste action using Javascript (without include Jquery)

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;
}

undefined value in semantic-ui input

I have simple from which i used semantic-ui-react to create it :
<Form onSubmit={this.handleSubmit.bind(this)}>
<Form.Field>
<Input placeholder="From ..." type="text" ref="from" />
<Label pointing>please enter valid email adress</Label>
</Form.Field>
<Divider />
now i cant access to value's of the input. here is my code:
from: this.refs.from.value
it's all undefined.how can fix this ?

I recommend to use Form and related components in the controlled way, because most of SUIR components are functional, so they don't support refs. I've a codepen to show it in action. There is also example in docs.

input type="password" shows text using HTML 5 on IE 11

Here is the basic format of html input
<input id="Password1" type="password" />
It displays text instead of password type.

That looks right. Do you have a link to an example? Maybe it's other html that isn't closed properly. I'd switch type and id just to see if it makes any difference.

I resolved the issue
If you add placeholder in <input id="Password1" type="password" placeholder="type your password" /> it will work in any condition .

page does not change from javascript

I am working on a website using Jekyll through github-pages. I am working on some simple javascripts to make a random number generator, but they aren't able to change values on the page.
The page has the following:
/resume/index.html
<form>
<input type="text" name="#d" maxlength="3" value="1" />
<div class="dice_text">d</div>
<input type="text" name="d#" maxlength="2" value="4" />
<button type="button" name="rollme" onclick="roll()">roll</button>
<div class="dice_text"> : </div>
<input type="text" id="dieresult" readonly />
</form>
/resume/roll.js
document.getElementById('dieresult').setAttribute('value', '3') ;
function roll() {
alert("rolled!");
}
For some reason I don't understand, the roll() function will get called and give an alert when you press the button, so the site seems to be incorporating the javascript file, but it refuses to alter the page to display a number in the read only field.
My repo is online at github, and the problem site url is here.
EDITED: corrected 'id' vs 'name' issue but page still won't change the value of 'dieresult'

You're mistaking the name attribute with the id attribute
When you attempt to grab that element using document.getElementById, it will return null.
Making the id dieresult should fix this. I highly suggest getting cozy with your browser's inbuilt JavaScript console - you pick up on minor mistakes like this very quickly!

Your <input type="text" name="dieresult" readonly /> does not have an ID, which is what you are looking for in the line document.getElementById('dieresult').setAttribute('value', '3') ;
If you change the <input type="text" name="dieresult" readonly /> to <input type="text" id="dieresult" readonly /> and place this in the roll() function it should work just fine

your input has a name but you query it by id, change it to this:
<input type="text" name="dieresult" id="dieresult" readonly />

You have a 404 on jquery. Fix this by putting a jquery in your roll folder.
And, you can try to execute you code once everybody is onboard
$( document ).ready(function() {
document.getElementById('dieresult').setAttribute('value', '3') ;
});
See http://learn.jquery.com/about-jquery/how-jquery-works/#launching-code-on-document-ready

Submitting a form by hitting return when the submit button is hidden; works in Firefox, does nothing in Chrome

I have a form with some input fields and a hidden submit button (hidden via style="display:none").
When you hit the return key when an input field is focused in Firefox, the form submits.
However in Chrome, when you hit return, nothing happens. I was wondering, how do you add this functionality back to Chrome?
Here's the form, take a look at it in Chrome:
http://jsfiddle.net/B59rV/2/
<form method="post" action="/xxxx" accept-charset="UTF-8">
<input type="hidden" value="SSjovFqEfRwz2vYDIsB6JRdtLAuXGmnT+tkyZnrtqEE=" name="authenticity_token">
<div class="input text_field">
<label>Email</label>
<input type="text" size="30" name="user_session[email]" />
</div>
<div class="input text_field">
<label>Password</label>
<input type="password" size="30" name="user_session[password]" />
</div>
<input type="submit" value="Sign In" style="display: none;" >
</form>

I have literally no idea why it's not working in Chrome. I think it's a bug.
However, it is somehow to do with that display: none.
I found a nasty, horrible (!!) workaround:
input[type="submit"] {
position: absolute;
top: -1000px
}
Don't hide it: instead, position it off the screen.
Live Demo - works in Chrome.

Tested in Chrome 22 and Firefox 18 perhaps this is the best workaround
.hide-submit {
position: absolute;
visibility: hidden;
}
<button type="submit" class="hide-submit">Ok</button>
Or a more generic way
input[type=submit].hide,
button[type=submit].hide {
display: block;
position: absolute;
visibility: hidden;
}
<input type="submit" class="hide">Go</input>
This basically hides the element in plain sight, no need to push it outside the screen

The best way to do this is:
<input type="submit" hidden />
Example:
<form onSubmit="event.preventDefault(); alert('logging in!')">
<label for="email">email:</label>
<input type="email" name="email" required />
<label for="password">password:</label>
<input type="password" name="password" required />
<input type="submit" hidden />
<p>Press enter to log in</p>
</form>

Probably a security "feature", although I haven't found a definitive explanation yet. I tried http://jsfiddle.net/B59rV/2/ without the password field and the alert occurs as expected. Same thing happens in IE8 for what it's worth. Those are the only browsers I have on this machine, so haven't tested on any others.

The only workaround i found, at least as dirty as positioning it out of the screen, is width:0; height:0; : somehow, Chrome doesn't interpret it like a hidden element

This is like Pioul's answer but I needed to do the following for a input[type=file] element:
position:absolute; //this helps the "hidden" element not disrupt the layout
width:0;
height:0;
// For <= IE7 a 1px piece of the form element still shows
// hide it with opacity=0; Tested element was input:file.
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
NOT tested with input[type=text]
Just another approach but I don't think this is much better than the accepted answer.