I have a problem with my inputs, i had a custom floating label once there is text inside my input. My problem is chrome autofill add the text after my javascript onDocumentReady check for text. I want my javascript function to be called after chrome as loaded the text or any time of autocompletion. Is it possible?
I have tried launching the javascript function upon documentGetReady.
$( document ).ready(function() {
toggleInputsFloatingLabelCustomClass();
});
Use a change function instead to see if any of your inputs change
jQuery('input').change(function(){
toggleInputsFloatingLabelCustomClass();
}
this will solve your problem of chrome autofilling after your script has run
You can add onkeyup definition for your inputs eq.
<input onkeyup='toggleInputsFloatingLabelCustomClassWithWait();'/>
than you can check if user is stil writing eq. Every one seocond and execute your method if user is writing like this:
var timeout = null;
function toggleInputsFloatingLabelCustomClassWithWait() {
clearTimeout(timeout);
timeout = setTimeout(function () {
toggleInputsFloatingLabelCustomClass();
}, 1000);
}
Related
So I have a very simple JS function written that works like the following.
There is a button that has the following code:
<button type="submit" class="large button" onclick="addCart(76,95,73,96);">
<i class="icon-shopping-cart"></i> Add to Cart
</button>
Now when that is clicked there is a very simple function added to the page below that looks like the following:
<script type="text/javascript">
function addCart(pid, pattr, pval, pscent = 0) {
...
}
</script>
This works perfectly in Chrome, Firefox, Chrome for Mobile, Safari for Mobile.
But this does not seem to work on Safari on Mac. Instead I get the following error:
ReferenceError: Can't find variable: addCart
I cannot figure out why. It's hard for me to add a listener because there are 7 buttons and a wide arrange of variables that are being sent, and I'd rather send that like I'm currently doing.
I finally found the issue.
The function was creating an error in Safari so it was never being defined. I changed the function to the following:
function addCart(pid, pattr, pval, pscent) {
pscent = (typeof pscent !== 'undefined') ? pscent : 0;
...
}
Notice the big difference is that I was no longer using the Function to declare a default value for 'pscent' and instead I do it the old school method. Not sure if this is being caused by an older version of Safari or what.
If you are here because of a similar error, look for some potential JS error in the function which will prevent the function from being declared.
Looks like you are submitting a form since the input type is "submit". Have you tried testing it with the input type set to "button"?
if you are using jquery try to use document ready function
$(document).ready(function() {
// code here
});
or use plain javascript self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
})();
the possible reason is your function is not available at the time of click
Here is a sample (using jquery) https://jsfiddle.net/baphmoLt/
I have created a server control for a login panel.
On this panel I have a textbox for the username and a textbox for the password.
Below that there is the button for login.
I want the button to be disabled if either or both textboxes are empty.
For that I created a function that checks the length of the contents of the textboxes.
function doCheck()
{
var lngth1 = document.getElementById('pnLogin_txtUserName').value.length;
var lngth2 = document.getElementById('pnLogin_txtPassword').value.length;
if (lngth1 > 0 && lngth2 > 0)
{
$('#pnLogin_btLogin').removeAttr('disabled');
} else {
$('#pnLogin_btLogin').attr('disabled','disabled');
}
}
I run this function at the start and on every keyup event.
That works great.
The problem is when the browser starts with the page. It fills in the username and password if they are stored.
When the function is then run, it still disables the button even though there is information in the textboxes.
I tried this:
setTimeout( function()
{
doCheck();
}, 2000);
But after 2 seconds I see the button disabling while seeing my credentials filled in.
If I inspect the element in Chrome, I don't see my credentials in the html code.
So where is it stored? How can I detect this?
You will not see the values in the html as they are not actually in the DOM.
You may access their values using $("#pnLogin_txtUserName").val() and
$("#pnLogin_txtPassword").val().
I would simplify your function and use jQuery specific syntax rather than native javascript.
function doCheck() {
var lngth1 = $("#pnLogin_txtUserName").val().length;
var lngth2 = $("#pnLogin_txtPassword").val().length;
if (lngth1 > 0 && lngth2 > 0) {
$('#pnLogin_btLogin').prop('disabled', false);
} else {
$('#pnLogin_btLogin').prop('disabled', true);
}
}
I also changed your code from .attr to .prop for disabling the input. Find more information with this stackoverflow question
The problem is when the browser starts with the page. It fills in the username and password if they are stored. When the function is then run, it still disables the button even though there is information in the textboxes.
Your code is being executed the moment it is loaded and parsed by the browser. The proper jQuery method is to use whats called .ready() which will execute after jQuery detects the page has finished loading.
$(document).ready( function() {
doCheck();
});
Or more simplified to:
$(function() {
doCheck();
});
detecting change
We can detect when the values get changed by bind an event listener:
$("pnLogin_txtUserName").change(function() {
console.log( 'pnLogin_txtUserName has changed', $(this).val() );
});
If we add a class to your inputs, say .loginElements, then we do things a bit easier and detect several different events:
$(".loginElements").on( 'change keypress', function() {
doCheck();
});
I have a form with some text boxes. I'm using bootstrap and I have a jquery plugin for form validation. My question is somehow some functions in bootstrap stopping the validation code from executing. This validation is written to onblur event and that code is in the same page with the form within <script> tags. I want to know that is there a way to find the running script on onblur event on google chrome developer tools.
Try jQuery Debugger for Chrome browser
If possible - give wep-page link
You can also override addEventListener(fiddle) and log then it calls:
function myEventListener(event, callback) {
console.log(this, event, callback);
this._addEventListener.apply(this, arguments);
}
HTMLElement.prototype._addEventListener = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = myEventListener;
document.querySelector('input').addEventListener('blur', function () {
document.body.style.background = 'red';
});
What I am looking for is slightly subjective, but I am sure there is a better way to do this.
I am looking for a better way to perform javascript while a user is typing content into either a textarea or input box on a website. For instance, sites such as Google Docs are capable of saving changes to documents almost instantly without noticeable performance degradation. Many sites however use a bit of jQuery that might look like the following:
$("#element").on("keyup", function() { /* Do something */ });
This works fine for simple things like autocomplete in search boxes, but performance becomes a nightmare once you have any sizable corpus for it to have to deal with (or if a user types fast, yikes).
In trying to find a better way to analyze/save/what-have-you text as the user is typing, I started to do something like this:
var changed = false;
$("#element").on("keyup", function() { changed = true });
setInterval(function() { if(changed) { /* Do something */ changed = false; } }, 1000);
It seems to alleviate laggy or delayed text input, but to me it seems like a less than elegant solution.
So back to my question, is there a better way to have javascript execute when a corpus has been changed? Is there a solution outside of using intervals?
Thanks.
There is a jQuery plugin that does pretty much what you did.
Your example will be transformed into
$("#element").on("keyup", $.debounce(1000, function() { /* Do something */ }));
The code will execute after a user is not pressing any keys for 1000ms.
I have found a very good solution for this. This code will check whether the content has been changed and based on that it will save it otherwise the save functionality will not be executed !
Check out this demo JSFIDDLE
Here is the code :
HTML :
Content:<br>
<br>
(type some text into the textarea and it will get saved automatically)
<textarea rows="5" cols="25" id="content"></textarea>
<br>
<span id="sp_msg_saved" style="background-color:yellow; display:none">Content is saved as draft !</span>
JS:
var old_content = "";
function save_content()
{
var current_content = $('#content').val();
//check if content has been updated or not
if(current_content != old_content)
{
alert('content is updated ! Save via ajax');
old_content = current_content;
$('#sp_msg_saved').show(100);
$('#sp_msg_saved').fadeOut(3000);
}
}
setInterval(save_content,3000);
You can increase or decrease the amount of time for the save function to call by altering the values in setInterval function. Put the code for saving the content via ajax, that will save the current user content into your DB, I haven't included that one...
You can make your own little delay by using the window.setTimeout-Function:
var IntervalId = null;
function saveEdits(){
//Doing your savings...
}
$('input').keyup(function(){
if (IntervalId){
window.clearTimeout(IntervalId);
IntervalId = null;
}
IntervalId = window.setTimeout(function(){
saveEdits();
}, 3000);
});
Currently developing a Firefox Addon in JavaScript. It scans a webpage for specific things like email addresses. Is there a way of being able to get it to read the source code of a website and set an event listener to a text box which can then detect whether a user is entering an email address in a text box on any website. Not sure whether this is possible in JavaScript as I am new to it. I need to be able to display an alert if the user types in an email address on a website but as this will be running from a Firefox Addon. Almost like it would display if you were using it for validation purposes on a website. But as this is from a Firefox Addon it doesn't quite work the same way.
I have looked at GreaseMonkey but its quite confusing and when trying to find specifically whether it could be done I have got stuck.
How could I implement this would be great or even whether it is possible.
You could do something like this:
window.onload = function () {
var inputs = document.getElementsByTagName('input');
for (i = 0; i < inputs.length; i++) {
inputs[i].onkeypress = function () {
if (this.value.match(/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*#([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/)) {
// do something
alert('Looks like an email address!');
}
};
}
};
Try it here: http://jsfiddle.net/samliew/49cny/
You can add a event listener like:
Syntax
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, aWantsUntrusted Non-standard]); // Gecko/Mozilla only
From https://developer.mozilla.org/en/docs/DOM/element.addEventListener
For example
document.getElementById('inputid').addEventListener("keypress", function(){/* Your code */}, false);
You would use the jQuery .keyPress() function Below is an example...Where #target is the ID of the Textbox.
var i=0;
$( "#target" ).keypress(function() {
i++;
console.log("Kep Pressed: " + i);
}