So, I searched for a while to see if I can disable the yellow color bg chrome adds to fields it remembers... This is a little annoying to my theme.
I found this code that fixes it!
<script type="text/javascript">
$(function() {
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
var intervalId = 0;
$(window).load(function() {
intervalId = setInterval(function () { // << somehow this does the trick!
if ($('input:-webkit-autofill').length > 0) {
clearInterval(intervalId);
$('input:-webkit-autofill').each(function () {
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
}
}, 1);
});
}
});
</script>
The issue is this little flash of yellow when you try it
Also here is my form....
<form action="login.php" method="post" class="form-container">
<input class="menu_button" type="submit" value="Login">
Register<br>
<input autocomplete="off" class="form-field" value="Username" type="text" name="username" onfocus="if (this.value=='Username') this.value='';"/><br />
<input class="form-field" value="Password" type="password" name="password" onfocus="if (this.value=='Password') this.value='';"/><br />
</form>
Is this simply because Chrome has glitches with it or something of that sort....
Is it even possible to fix?
You could hide the elements with CSS
/* may as well target Chrome (catches Safari too tho) */
#media screen and (-webkit-min-device-pixel-ratio:0){
input{
opacity:0;
}
}
Then show them after that webkit business kicks in.
$('input').css({opacity:1});
Yes they'll be invisible on load but that shouldn't really be noticeable.
Related
I have 13 input text boxes simply to collect information from user. I'm trying to add a little bit of logic that when user clicks next button check to see if input field is blank and if so place a X image after the textbox. Where I'm getting up up at is if I put text in the box then it will not outline the box in red but still places an X after the form.
I've tried using the $.each() and $.filter()
Here is the js:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
var inputs = $(":input").filter(function () {
return this.value === "";
});
if (inputs.length) {
$(inputs).css('border-color', 'red').after(invalid);
console.log(inputs.length);
}
});
Here is some of the input text boxes not all :
<label>First Name:</label>
<input type="text" name="First Name" class="txtbox" id="firstName" />
<label>Last Name:</label>
<input type="text" name="Last Name" class="txtbox" id="lastName" />
<label>Email Address:</label>
<input type="text" name="Email Address" class="txtbox" id="email" />
<label>Company:</label>
<input type="text" name="Company" class="txtbox" id="company" />
Try this:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
$(":input").each(function () {
if($(this).val() == '' ){
$(this).css({borderColor: 'red'}).after(invalid);
}
});
});
Note that if you had not previously set other border css parameters, the color may not work. So this pattern can take care of it in that case:
.css({border: '1px solid red'})
Now, :input is a bit broad and therefore inefficient. Therefore, its better to say:
$(':text', '#container').each(...
Where #container is, of course, the container of all your inputs.
Please, consider use jquery Validate, you can see examples here and documentation here
I want to make a form for registration and the form should have two fields for password, so there is no mix up.
So if the passwords are the same, there should be a green bock right to the field, and if not there should be a red cross..
So here is my code for testing, but it doesn't work.
<script language="javascript" type="text/javascript">
function check()
{
var loc;
if (test.name1.value == test.name2.value) {
loc = "/img/greenbock.jpg";
}
if (test.name1.value != test.name2.value) {
loc = "/img/redcross.jpg";
}
return loc;
}
</script>
</head>
<body>
<form name="test" method="post" action="">
Name<br />
<input name="name1" type="text" /><br />
Name agian<br />
<input name="name2" type="text" onblur="check()" />
<script language="javascript" type="text/javascript">
if(loc != "")
{
document.write("<div style=\"height:19px; width:20px; background-image:url("+ loc + ")\"></div>");
}
</script>
<br />
Username<br />
<input name="username" type="text" /><br />
So where am I wrong? A little fault or, should i thruw everything away?
[edit]
Now I have set the check-function to run the script after input. So now its doing samething, because everything disapears.. Solutions?
My suggestion would be to let the style of the error/success images be controlled with CSS. Then your validation function can decide what CSS class to assign to a <div> sitting next to your input fields.
Additionally, you will need to add the check() to the other name input in case the user returns to either field later and makes a change.
CSS
/* Shared styling */
.validation-image {
height:19px;
width:20px;
display: none;
}
/* Error styling */
.validation-error {
background-color: #ff0000;
background-image: url('/img/redcross.jpg');
}
/* Success styling */
.validation-success {
background-color: #00ff00;
background-image: url('/img/greenbock.jpg');
}
HTML
<form name="test" method="post" action="">Name
<br />
<input name="name1" type="text" onblur="checkNames()" />
<br />Name agian
<br />
<input name="name2" type="text" onblur="checkNames()" />
<div id="nameValidation" class="validation-image"></div>
<br />Username
<br />
<input name="username" type="text" />
<br />
</form>
JavaScript
function checkNames() {
// Find the validation image div
var validationElement = document.getElementById('nameValidation');
// Get the form values
var name1 = document.forms["test"]["name1"].value;
var name2 = document.forms["test"]["name2"].value;
// Reset the validation element styles
validationElement.style.display = 'none';
validationElement.className = 'validation-image';
// Check if name2 isn't null or undefined or empty
if (name2) {
// Show the validation element
validationElement.style.display = 'inline-block';
// Choose which class to add to the element
validationElement.className +=
(name1 == name2 ? ' validation-success' : ' validation-error');
}
}
Of course, this is a lot more code than you had before, but you could turn this into a re-usable function pretty easily.
jsFiddle Demo
Try this, document.test.name1.value or document.forms["test"]["name1"].value instead of test.name1.value
should be
var loc;
var name1=document.forms["test"]["name1"].value;
var name2=document.forms["test"]["name2"].value;
if(name1== name2){
loc = "/img/greenbock.jpg";
}else {
loc = "/img/redcross.jpg";
}
I use these libraries:
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
And I have a hidden form that only shows if I click the button. But I can't close it.
I find this example in the Internet and I have tried to implement it in my page.
Need help, I have tried a lot and nothing works.
Here is my code:
<div id="login-box" class="login-popup">
<img src="icon/close_pop.png" class="btn_close" title="Close Window" alt="Close" />
<form method="post" class="signin" action="#">
<legend>Contacto</legend>
<fieldset class="textbox">
<label class="Nome">
<span>Nome</span>
<input id="nome" name="nome" value="" type="text" autocomplete="on" placeholder="Nome">
</label>
<label class="Email">
<span>Email</span>
<input id="email" name="email" value="" type="email" placeholder="nome#dominio.com">
</label>
<label class="Mensagem">
<span>Mensagem</span>
<textarea rows="20" cols="56" name="mensagem" id="comment" id="mensagem" placeholder="A sua mensagem..."></textarea></label>
<button type="submit" class="submitbutton" style="width:80px;height:30px">Enviar</button>
</fieldset>
</form>
</div>
<script type="text/javascript">$(document).ready(function() {
$('a.login-window').click(function() {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
You have a typo in your selectors; you probably want to change $('a.close, #mask') to $('a.closest, #mask').
Also, .live() is deprecated since jQuery 1.7, use .bind() instead.
Made a JSFiddle: http://jsfiddle.net/fhuNd/
You don't have a proper jquery selector, i.e. The jquery selector you have used doesn't point to any element in your page, hence it doesn't work.
use $('a.closest')
I am working on adding "search" text to a search box. I am trying to achieve:
onfocus: disappear text
And
onblur: reappear text
So far I have achieved this but i have had to hardcode it into html:
eg.
<input type="text" name="s" id="search-text" size="15" value="Search"
onfocus="if (this.value==this.defaultValue)
this.value='';" onblur="if(this.value==''){this.value='Search'}">
And if I add this the of my .html file I am getting the same result:
eg.
<script type="text/javascript">
var defaultText = "Search...";
var searchBox = document.getElementById("search");
//default text after load
searchBox.value = defaultText;
//on focus behaviour
searchBox.onfocus = function() {
if (this.value == defaultText) {//clear text field
this.value = '';
}
}
//on blur behaviour
searchBox.onblur = function() {
if (this.value == "") {//restore default text
this.value = defaultText;
}
}
</script>
(courtesy: http://zenverse.net/javascript-search-box-show-default-text-on-load/)
What i am trying to achieve is using the above code in an external .js file but no matter what I do i cannot manage to back-link the code to my search box in my .html file.
I am sorry if this is a bad question I have made about 10 different .html and .js files swapping and remapping code and still can't get it to work without having the javascript in the actual .html file.
Any help would be much appreciated Thank You.
Use the HTML5 placeholder attribute:
<input type="text" placeholder="Search" />
Notice that the text doesn't go away until the user enters some text. This way, the user will see the hint for longer.
Try using the HTML placeholder attribute.
<input type="text" name="s" id="search-text" size="15" value="" placeholder="Search" />
But if you still want do it with JavaScript, see the following demo:
var defaultText = "Search...";
var searchBox = document.getElementById("search");
//default text after load
searchBox.value = defaultText;
//on focus behaviour
searchBox.onfocus = function() {
if (this.value == defaultText) {//clear text field
this.value = '';
}
}
//on blur behaviour
searchBox.onblur = function() {
if (this.value == "") {//restore default text
this.value = defaultText;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form method="get" action="">
<input type="text" name="search" id="search" value="" />
<input type="submit" name="submit" value="Search" />
</form>
</body>
</html>
Might be useful to take a look at jQuery Placeholder for placeholder support in older browsers.
Use below script it is working fine.
<script type="text/javascript">
var defaultText = "Sitede ara…";
var searchBox = document.getElementById("ctl00_ctl34_S52EF3DAB_InputKeywords");
//default text after load
searchBox.value = defaultText;
//on focus behaviour
searchBox.onfocus = function () {
if (this.value == defaultText) {//clear text field
this.value = '';
}
}
I know this can be accomplished in Javascript (I hope!) I have a couple of forms on my page, but I cannot guess how many the user will need, so is there some magic which can be done in javascript which when a button is pressed this:
<input name="userfile[]" type="file" /><br />
<input type="text" value="Description goes here." name="imagedescription2" maxlength="20" onfocus="this.value = '';" /><br />
Is added to a designated area? Keeping in mind adding a number onto the name if the button is pressed eg name="imagedescription3" next name="imagedescription4" and so forth
This may be posted around the internet, I know it would be, I just don't know how to thorougly phrase my question
If possible, I recommend adding jQuery to your project. It makes DOM manipulation easy.
http://api.jquery.com/category/manipulation/
An example might look like this
Add Item
<div id="#wrapper">
<input type="text" value="Description goes here." name="imagedescription1" maxlength="20" onfocus="this.value = '';" /><br />
<input type="text" value="Description goes here." name="imagedescription2" maxlength="20" onfocus="this.value = '';" /><br />
</div>
<script>
$(function(){
var i = 3; // i would be incremented with each add.
$("#myButton").click(function(){
$('<input type="text" value="Description goes here." name="imagedescription' + i + '" maxlength="20" onfocus="this.value = '';" /><br />').appendTo('#wrapper');
});
return false;
});
</script>
You can write a JS function for adding textboxes and call the function when the button is pressed.
The function should go along these lines....
var count;
function functionName()
{
count++;
document.Write('<input type="text" value="..." name="imagedescriptor'+count+'" max..');
}
Hopefully it works.
Try this:
var i = 2;
var sourceTextNode = document.getElementsByName("imagedescription2")[0];
function createTextBox(){
var newNode = sourceTextNode.cloneNode(false);
newNode.setAttribute("name", ++i);
var parent = sourceTextNode.parentNode;
if(parent.lastchild == sourceTextNode) {
parent.appendChild(newNode);
} else {
parent.insertBefore(newNode, sourceTextNode.nextSibling);
}
}
function btnClicked(){
createTextBox();
}
another jQuery solution:
Live Demo
$("#f_add").click(function(e) {
var field = document.createElement('input');
$(field).attr('type', 'text');
$(field).attr('name', 'field[]');
$("#thenewhotness").append(field);
e.preventDefault();
});
<form id="thenewhotness">
<button id="f_add">Add Extra Field</button>
<input type="text" name="field[]">
</form>