onkeypress is working but onblur is not - javascript

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/>

Related

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

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.

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.

Text disappear on click, but new text entered disappears to

Well I am making my first landing page, something not overly professional, I want to get in the hang of being able to make simple web pages myself.
So my issue is that whenever you click on the textbox, the text disappears. Which it should. But when the user enters text, clicks off the text box and clicks back on it, that text disappears.
How can I make it so that the newly entered text does not disappear?
My current code for the text fields:
http://pastie.org/8366114
<input type="text" value="Enter Your First Name" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your First Name';"
onclick="javascript:if(this.value=='Enter Your First Name')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Email" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your Email';"
onclick="javascript:if(this.value=='Enter Your Email')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Phone Number" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your Phone Number';"
onclick="javascript:if(this.value=='Enter Your Phone Number')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="submit" class="button" name="submit" value=""></input>
I apologize for not posting it on here, but I don't know how to do the code block thing..
to do this with javascript all you need is
<input type="text" value="Enter Your First Name"
onblur="if(this.value=='')this.value='Enter Your First Name';"
onfocus="if(this.value=='Enter Your First Name')this.value='';" />
DEMO
however you can just simply use the html5 placeholder reference
also
dont use the same id more then once, instead use class.
input is self-closing (like <br>)
</br> is wrong use <br> or <br />
here is a working version of your code, i also added submit as the value for your button
<input type="text" placeholder="Enter Your First Name" class="form"><br/>
<input type="text" placeholder="Enter Your Email" class="form"><br/>
<input type="text" placeholder="Enter Your Phone Number" class="form"><br/>
<input type="submit" class="button" name="submit" value="submit">
DEMO
<input type="text" value="Enter Your First Name" id="form" onblur="if(this.value=='')this.value='Enter Your First Name';" onfocus="if(this.value=='Enter Your First Name')this.value='';" />
or if you are using HTML5, you can use placeholder attribute:
<input type="text" placeholder="Enter Your First Name" id="form" />
you have to make the onfocus event the same as the onclick event, e.g:
onfocus="javascript: if (this.value == 'Enter Your First Name') this.value = '';"
onFocus="this.value=''"
This is causing your text fields to be reset to blank unconditionally.
You probably only need onclick or onfocus here, and since onfocus will take into account tabbing into the field as well as clicking it with the mouse, I would recommend moving the code from onclick to onfocus and deleting onclick altogether.
Remove content from form onclick:
in haml:
= f.text_field :title, :value => 'Name', :onfocus => "if (this.value=='Name') this.value='';"
in html:
<input id="project_title" name="project[title]" onfocus="if (this.value=='Name') this.value='';" type="text" value="Name">

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