Firefox HTML5 invalid form message bubble position - html

I am having a simple HTML5 form field:
<input type="text" name="first" id="first" placeholder="first" required="required" value="">
If the submit is invalid (empty), the message bubble appears as expected. But when I scroll to the form field position with the mouse scroll wheel and do not change focus, the bubble stays fixed and does not scroll with the document.
In Chrome, the message bubble behaves correctly and scrolls together with the document.
A search for "html5 firefox form validation message position" or similar did not produce any useful results.
Simple HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Form Test</title>
</head>
<body style="padding-top: 800px; padding-bottom: 200px;">
<form style="margin: 0 auto;">
<input type="text" name="first" id="first" placeholder="first" required="required" value="">
<input type="submit" name="submit" value="test">
</form>
</body>
</html>

Not a complete solution. Can close each element at first time using the solution below. Look still its an Firefox open bug
if(navigator.userAgent.toLowerCase().indexOf("firefox") > -1){
$(document).ready(function(){
$( "form" ).on('mouseleave', function(event) {
var activeElement = $("*:focus");
if(activeElement){
setTimeout(function(){
var x = window.scrollX, y = window.scrollY;
activeElement.blur();
window.scrollTo(x, y);
},1000);
}
});
});
}

Updated one
if(navigator.userAgent.toLowerCase().indexOf("firefox") > -1){
$("form input").on("invalid", function(event) {
$( "form" ).on('mouseleave', function(event) {
activeElement = document.activeElement;
setTimeout(function(){
console.log(activeElement);
var x = window.scrollX, y = window.scrollY;
activeElement.blur();
activeElement.focus();
window.scrollTo(x, y);
},2000);
});
});
}

Related

Add new button after text changed

I`m using Angualr for my web.
I have this part in html code:
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
</div>
I want to add method (in the Controller) that when the text change, it will add a new button down.
How can I do it? I can`t understand how ng-change works.
thanks
Simply use ng-if to check if newCreative.companionUrl exists in scope :
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="newCreative.companionUrl">
</div>
You can also use a function to validate button visibility :
index.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="scripts.js"></script>
</head>
<body ng-controller="SampleController as ctrl">
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="ctrl.isButtonAvailable()">
</div>
</body>
</html>
script.js
angular.module('app', []);
angular.module('app').controller('SampleController', function ($scope) {
var ctrl = this;
ctrl.isButtonAvailable = function() {
if(!$scope.newCreative) {
return false;
}
// Ensure companion url starts with https:// using a regular expression
return /^https:\/\//.test($scope.newCreative.companionUrl);
}
});
Working example
Check out this Plunker : https://plnkr.co/edit/n8VtJrenePGf9hCbmzWJ
You can use the directives ng-change on input and ng-if or ng-show on button, plus a little code on controller.
Check this:
http://codepen.io/mQuixaba/pen/oZqXWG?editors=1111
HTML:
<div ng-app="myApp" ng-controller="MyController">
<label for="input">Text:</label>
<input type="text" id="input" ng-model="text" ng-change="showButton=true"/>
<button ng-if="showButton" ng-click="hideButton()">My Button</button>
</div>
JS:
angular
.module('myApp', [])
.controller('MyController', function($scope){
$scope.showButton = false;
$scope.text = "My text";
$scope.hideButton = function() {
$scope.showButton = false;
}
});

Focus back to textbox on blur event angular

View:
<label class="item item-input">
<input type="text" ng-model="scan.text" placeholder="Scan here" ng-enter="scanBarcode2(scan)" ng-focus="hideKey()">
<span>{{scantext.text}}</span>
</label>
Controller
.controller('RollCallScan2Ctrl', function($scope,$stateParams, Api, $cordovaBarcodeScanner,$filter,$ionicPopup) {
var a=[], b={};
$scope.empdata = a;
$scope.scan = {text: ""};
})
I want to set focus on textbox, when view is loaded and whenever focus is off from it or user touches anywhere in screen. I need to focus back to textbox.
You can do this by using 'ng-blur' directive in Angular. I have created a sample plnkr with setTimeout to see the focus which is going back to textbox when the focus is out
http://plnkr.co/edit/JNfYmL0Bk7pcJXQdQWWN?p=preview
JS:
angular.module("focusApp", [])
.controller("focusController", function($scope) {
document.getElementById('sampleText').focus();
$scope.focusTextBox = function() {
setTimeout(function() {
document.getElementById('sampleText').focus();
}, 100);
};
});
HTML:
<html ng-app="focusApp">
<head>
<script data-require="angular.js#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="focusController">
<input type="text" id="sampleText" placeholder="Focussed text box" ng-blur="focusTextBox()"><br /><br />
<input type="text" placeholder="Text box to test Focus">
</body>
</html>

How to stop the ipad web page slide when we click on input field

I have web page in which i have input field when i enter any data in textfield screens slides up i want to stop this slides,i have searches some people say it is by default in ipad you can not fix it any idea how tackle this issue.
here is my code
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
<script>
function test(){
alert("Working");
window.scrollTo(0,600);
}
</script>
</head>
<body>
<h1>Form Demo</h1>
<form>
<label for="name">Text Input:</label>
<input type="text" onKeyPress="test()" name="name" id="name" value="" style="margin:400px 0 0 0;" />
</form>
</body>
</html>
Disabled scrolling with this:
<script type="text/javascript">
$(document).ready(function() {
document.ontouchmove = function(e){
e.preventDefault();
}
});
</script>

Writing html form data to a txt file without the use of a webserver

I was wondering if there is a way to submit/write html form data to a txt file with the use of scripts but with out using a webserver, webhost, wamp, xamp etc.
I have been trying with php scripts but they just open the php document on submitting.
Any help is appreciated :D
Something like this?
<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="name" value="test.txt">
<textarea rows=3 cols=50 name="text">Please type in this box. When you
click the Download button, the contents of this box will be downloaded to
your machine at the location you specify. Pretty nifty. </textarea>
<input type="submit" value="Download">
</form>
</body>
</html>
You can use JavaScript:
<script type ="text/javascript">
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("C:\test.txt", True);
s.writeline(document.passForm.input1.value);
s.writeline(document.passForm.input2.value);
s.writeline(document.passForm.input3.value);
s.Close();
}
</script>
If this does not work, an alternative is the ActiveX object:
<script type = "text/javascript">
function WriteToFile(passForm)
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.CreateTextFile("C:\\Test.txt", true);
s.WriteLine(document.passForm.input.value);
s.Close();
}
</script>
Unfortunately, the ActiveX object, to my knowledge, is only supported in IE.
i made a little change to this code to save entry of a radio button but unable to save the text which appears in text box after selecting the radio button.
the code is below:-
<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="name" value="test.txt">
<textarea rows=3 cols=50 name="text">PLEASE WRITE ANSWER HERE. </textarea>
<input type="radio" name="radio" value="Option 1" onclick="getElementById('problem').value=this.value;"> Option 1<br>
<input type="radio" name="radio" value="Option 2" onclick="getElementById('problem').value=this.value;"> Option 2<br>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="problem" id="problem">
<input type="submit" value="SAVE">
</form>
</body>
</html>
I know this is old, but it's the first example of saving form data to a txt file I found in a quick search. So I've made a couple edits to the above code that makes it work more smoothly. It's now easier to add more fields, including the radio button as #user6573234 requested.
https://jsfiddle.net/cgeiser/m0j7Lwyt/1/
<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download() {
var filename = window.document.myform.docname.value;
var name = window.document.myform.name.value;
var text = window.document.myform.text.value;
var problem = window.document.myform.problem.value;
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
"Your Name: " + encodeURIComponent(name) + "\n\n" +
"Problem: " + encodeURIComponent(problem) + "\n\n" +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form name="myform" method="post" >
<input type="text" id="docname" value="test.txt" />
<input type="text" id="name" placeholder="Your Name" />
<div style="display:unblock">
Option 1 <input type="radio" value="Option 1" onclick="getElementById('problem').value=this.value; getElementById('problem').show()" style="display:inline" />
Option 2 <input type="radio" value="Option 2" onclick="getElementById('problem').value=this.value;" style="display:inline" />
<input type="text" id="problem" />
</div>
<textarea rows=3 cols=50 id="text" />Please type in this box.
When you click the Download button, the contents of this box will be downloaded to your machine at the location you specify. Pretty nifty. </textarea>
<input id="download_btn" type="submit" class="btn" style="width: 125px" onClick="download();" />
</form>
</body>
</html>

Update html using jquery form

So here's what i'm trying to do.
A standalone html page with some jquery in it.
The jquery code has a form (with elemts to capture Marquee text, speed, color, repeat, etc)
With all the form elements captured above, i need to create a scrolling text marquee.
What i'm not able to figure out:
How can the HTMl element (div class="scroller") be updated whenever there is a change in any of the form field values ?
Below is what i have so far :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple jQuery scrolling function by Max Vergelli</title>
<style type="text/css">
div.scroller, #fast_scroller{
position:relative;
height:24px;
width:500px;
display:block;
overflow:hidden;
border:#CCCCCC 1px solid;
}
div.scrollingtext{
position:absolute;
white-space:nowrap;
font-family:'Trebuchet MS',Arial;
font-size:18px;
font-weight:bold;
color:#000000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<script src="http://jquerymobile.com/test/js/jquery.js"></script>
<script src="http://jquerymobile.com/test/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/test/js/jquery.mobile.docs.js"></script>
<script src="http://www.vegabit.com/jquery_scroller/jquery.Scroller-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//this is the useful function to scroll a text inside an element...
function startScrolling(scroller_obj, velocity, start_from){
//bind animation to the children inside the scroller element
scroller_obj.children().bind('marquee', function(event,c) {
//text to scroll
var ob = $(this);
//scroller width
var sw = parseInt(ob.parent().width());
//text width
var tw = parseInt(ob.width());
//text left position relative to the offset parent
var tl = parseInt(ob.position().left);
//velocity converted to calculate duration
var v = velocity>0 && velocity<100 ? (100-velocity)*100 : 5000;
//same velocity for different text's length in relation with duration
var dr = (v*tw/sw)+v;
//is it scrolling from right or left?
switch(start_from){
case 'right':
//is it the first time?
if(typeof c == 'undefined'){
//if yes, start from the absolute right
ob.css({ left: sw });
sw = -tw;
}else{
//else calculate destination position
sw = tl - (tw + sw);
};
break;
default:
if(typeof c == 'undefined'){
//start from the absolute left
ob.css({ left: -tw });
}else{
//else calculate destination position
sw += tl + tw;
};
}
//attach animation to scroller element and start it by a trigger
ob.animate( {left:sw},
{ duration:dr,
easing:'linear',
complete:function(){ob.trigger('marquee');},
step:function(){
//check if scroller limits are reached
if(start_from == 'right'){
if(parseInt(ob.position().left) < -parseInt(ob.width())){
//we need to stop and restart animation
ob.stop();
ob.trigger('marquee');
};
}else{
if(parseInt(ob.position().left) > parseInt(ob.parent().width())){
ob.stop();
ob.trigger('marquee');
};
};
}
});
}).trigger('marquee');
//pause scrolling animation on mouse over
scroller_obj.mouseover(function(){
$(this).children().stop();
});
//resume scrolling animation on mouse out
scroller_obj.mouseout(function(){
$(this).children().trigger('marquee',['resume']);
});
};
//the main app starts here...
//change the cursor type for each scroller
$('.scroller').css("cursor","pointer");
//settings to pass to function
var scroller = $('.scroller'); // element(s) to scroll
var scrolling_velocity = 40; // 1-99
var scrolling_from = 'right'; // 'right' or 'left'
//call the function and start to scroll..
startScrolling( scroller, scrolling_velocity, scrolling_from );
//create a new scroller but it starts from left...
$('#fast_scroller').css("cursor","pointer");
startScrolling( $('#fast_scroller'), 75, 'left');
});
</script>
</head>
<body>
<br />
<br />
<div data-role="header" data-theme="f">
<h1>Banner Free*</h1>
</div><!-- /header -->
<div data-role="content">
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="It was nice to meet you :) !!"</input>
</div>
<div data-role="fieldcontain">
<label for="slider2">Repeat:</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider">Text Speed:</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
<label for="checkbox-6">b</label>
<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
<label for="checkbox-7"><em>i</em></label>
<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
<label for="checkbox-8">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Color:</legend>
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
<label for="radio-choice-c">Color1</label>
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
<label for="radio-choice-d">Color2</label>
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
<label for="radio-choice-e">Color3</label>
</fieldset>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</div>
</form>
</div><!-- /content -->
<div class="scroller">
<div class="scrollingtext">
this is a simple scrolling text!
</div>
</div>
<div id="fast_scroller">
<div class="scrollingtext">
this is faster!
</div>
</div>
</body>
</html>
Call this when the submit button is pressed:
$('form').find(':input').each(function(){
$(this).on('change',function(){
// Manipulate the marquee in here
if($(this).val()=='b') {
$('.marquee').css('font-weight','bold');
}
// etc...
});
});
you can use the onchange event like such:
<input onchange="updateMarquee()"/>
Here's a link for a quick tutorial:
onchange event