I have the following program for the jQuery Mask plugin:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="./scripts/jquery.mask.js"></script>
<script>
// https://learn.jquery.com/using-jquery-core/document-ready/
$(document).ready(
function () {
$("#ssnId").mask("999-99-9999");
}
);
</script>
</head>
<body>
SSN:<br />
<input type="text" id="ssnId" name="ssn" />
</body>
</html>
When I blank out the SSN text field and type in a test pattern such as
33y
33=
33(
33+
or
33G
the last character gets changed to a minus and
33--
becomes the output.
(Notice that there are two minuses in the final output)
Is there some way I can get the jQuery Mask plugin to stop changing the last character of my test patterns to "--"?
NOTES:
I'm using v1.7.7 of the jQuery Mask plugin found at https://plugins.jquery.com/mask/
Please abstain from lecturing on best security practices for processing PII and SSN data since I'm only using SSN as an example.
Try making your mask use # instead of 9
$("#ssnId").mask("###-##-####");
And also add maxlength to the input tag:
<input type="text" id="ssnId" name="ssn" maxlength="11" />
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-mask-plugin#1.14.16/dist/jquery.mask.min.js"></script>
<script>
// https://learn.jquery.com/using-jquery-core/document-ready/
$(document).ready(
function () {
$("#ssnId").mask("###-##-####");
}
);
</script>
</head>
<body>
SSN:<br />
<input type="text" id="ssnId" name="ssn" maxlength="11" />
</body>
</html>
Related
I have html page name try1.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
</head>
<body>
<div id="join1">Join1</div>
<div id="join2">Join2</div>
<script src="script.js"></script>
</body>
</html>
and another html page name try2.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
</head>
<body>
<div><input type="text" id="val"></div>
<script src="script.js"></script>
</body>
</html>
I wanted to set the input value of try2.html with different value based on what I choose to click in try1.html using jquery(script.js) as below:
$(document).ready(function(){
$("#join1").click(function(){
$("#val").val("Z1");
$(location).attr("href", "try2.html");
});
$("#join2").click(function(){
$("#val").val("Z2");
$(location).attr("href", "try2.html");
});
});
Is there any mistake I have made which causes the value to not change? Thank You...
You can use GET parameter.
$(document).ready(function(){
$("#join1").click(function(){
$(location).attr("href", "try2.html?q=Z1");
});
$("#join2").click(function(){
$(location).attr("href", "try2.html?q=Z2");
});
});
Also you can change your input name.
<div><input name="q" type="text" id="val"></div>
Then you can get parameters.
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const ourValue = urlParams.get('q');
console.log(ourValue); //you can change your input value to ourValue.
document.getElementById('val').value = ourValue;
I tried to add to textarea a line of the row numbers with this example:
http://alan.blog-city.com/jquerylinedtextarea.htm
this is my code and I allready use the css and js in my project:
<!DOCTYPE html>
<html>
<head>
<title>CODE</title>
<link href="jquery-linedtextarea.css" rel="stylesheet">
<script src="jquery-linedtextarea.js"></script>
</head>
<body>
<textarea class="lined" name="mytext"></textarea>
<script>
$(function () {
$(".lined").linedtextarea(
{ selectedLine: 1 }
);
$("mytext").linedtextarea();
});
</script>
</body>
</html>
what I wrong ?
It seems you forget to call Jquery Library...
Just add the code below on your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
And I believe you should delete that part:
$("mytext").linedtextarea();
I've made a code. It works for me. Check it out...
<html>
<head>
<title>JQuery LinedTextArea Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.js"></script>
<link href="http://files.aw20.net/jquery-linedtextarea/jquery-linedtextarea.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>JQuery LinedTextArea Demo</h1>
<p>Add a scrollable lined area to a standard TextArea control.</p>
<textarea class="lined" rows="10" cols="60">
JavaScript was originally developed by Brendan
Eich of Netscape under the name Mocha,
which was later renamed to LiveScript,
and finally to JavaScript.
The change of name from LiveScript to JavaScript roughly
coincided with Netscape adding support for
Java technology in its Netscape Navigator
web browser.
</textarea>
<script>
$(function() {
$(".lined").linedtextarea(
{selectedLine: 1}
);
});
</script>
</body>
</html>
I am trying to load templates from a file into an HTML file using a script tag. I want to use this as a template in UnderscoreJS - but I'm not able to load the file:
//main.js
this.template = _.template($("#add-question").html());
console.log("testing");
console.log(this.template({
question: "How are you doing?",
yesOrNo: true
}))
//console output:
testing Main.ts:37
Main.ts:38
//main html file:
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<script type="text/template" id="add-question" src="client/add-new-question.html"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js" type="text/javascript"></script>
<script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
<script data-main="main.js" src="build/require.js"></script>
</body>
</html>
// client/add-new-question.html
<form id="testForm">
<span>"<% question %></span>
<input id="questionInput" type="text">
<span>"<% yesOrNo %></span>
<input id="typeInput" type="checkbox">
</form>
Update:
Here's the updated HTML in in which I've tried loading the html though a script tag in the body. Still doesn't work. This is how its expected to be done when rendering the template with UnderscoreJS. I want to be able to load the template with requireJS but render it using the underscoreJS template function.
<body>
<script type="text/template" id="add-question">
<form id="testForm">
<span>"<%= question %></span>
<input id="questionInput" type="text">
<span>"<%= yesOrNo %></span>
<input id="typeInput" type="checkbox">
</form>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
<script data-main="main.js" src="build/require.js"></script>
</body>
You have to use <%= to output variables instead of <%.
It looks like you are using requirejs.
So you could also use the tpl extension and store your underscore template in .tpl files:
https://github.com/ZeeAgency/requirejs-tpl
define(['tpl!client/add-new-question.html'], function(tpl) {
console.log(tpl({
question: "How are you doing?",
yesOrNo: true
}));
});
Links:
How to use underscore.js as a template engine?
and underscore.js
Being new to Dojo I'm trying to initialize a Dijit form with values, e.g. read from storage, XHR etc.
However, invoking form.setFormValues() causes an error TypeError: invalid 'in' operand this.formWidgets thrown by http://yandex.st/dojo/1.7.3/dojox//form/manager/_Mixin.js
Is there anything I'm doing wrong or is this a Dojo issue? (The complete sample is also found here: http://pastebin.com/7LUHr3iA)
<!-- language-all: lang-html -->
`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dijit/themes/claro/claro.css" media="screen">
<script type="text/javascript">
dojoConfig = {async: true,parseOnLoad: true};
</script>
<script type="text/javascript" src="http://yandex.st/dojo/1.7.3/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dijit/form/TextBox","dijit/form/Button","dojox/form/Manager",
"dojo/parser","dojo/dom","dijit/registry"], function () {});
</script>
</head>
<body class="claro">
<form id="myForm" method="post" data-dojo-type="dojox.form.Manager">
<label for="name">Name</label>
<input id="name" name="nameField" data-dojo-type="dijit.form.TextBox"/><br/>
<label for="surname">Surname</label>
<input id="surname" name="surnameField" data-dojo-type="dijit.form.TextBox"/><br/>
<button data-dojo-type="dijit.form.Button">Submit</button>
<script type="dojo/method" event="startup">
var form = dijit.byId("myForm");
form.setFormValues({
nameField: "Hello",
surnameField: "World"
});
</script>
</form>
</body>
</html>
`
Dojo 1.7 is asynchronous. Code should take the form:
require(["dependency"], function(dep) {
// use dependency
});
There is no reason to believe dojox/form/Manager would be loaded when you try to reference it further down the page.
The registry is the correct way to reference the widget, not 1.6 style code of the form dijit.byId. See livedocs.
See also the dojo/domReady! plugin.
I am writing a simple HTML code which uses YUI autocomplete (to display suggestion as you type like Google). But a <select> block is getting displayed over the suggestions list in IE6 only.
It is working fine in other browsers.
I used bgiframe to avoid it because of z-index bug in IE6 but had no luck.
My simple code is here:
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('#myContainer').bgiframe();
});
</script>
<style type="text/css">
#myAutoComplete {
width:25em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
</head>
<body>
<h1>Autocomplete using YUI !</h1>
<label for="myInput">Search names in our database:</label>
<div id="myAutoComplete" class="yui-skin-sam">
<input id="myInput" type="text">
<div id="myContainer"></div>
</div>
<br>
<div>
<form action="#" method="get" accept-charset="utf-8">
<select>
<option value="val1">val1</option>
<option value="val2">val2</option>
</select>
</form>
</div>
</body>
Here select is displayed over myContainer (myContainer displays populated suggestions).
I know I am making some blunder.
Please help me to figure it out.
One thing you can do is hide the <select> (use visibility:hidden as not to mess up the layout) at the beginning of the process and show it at the end.
BTW: The likelihood of finding another StackOverflow user using YUI + jQuery + bgiframe + ie6 is quite low. Most users like to help with debugging code, not plug-ins.
jQuery and YUI live in separate namespaces so there shouldn't theoretically be a problem. Are you sure there are no JavaScript errors? Are all the libraries loaded correctly?
Could use jQuery autocomplete instead?
Edit: You can configure the YUI autocomplete to use an iFrame! It kind of works in that it does hide the <select> but not instantly. This is probably the best solution since it does not needs jQuery or bgiframe.
Edit 2: I was not happy with the speed at which the <iframe> was created by YUI so came up with this hack! Here is a complete solution that seems to work in IE6 for me. THe problem is that YUI is in control of the #myContainer which seems to break the bgiframe that jQuery sets up. So I opted to simply manipulate the height of #myContainer with the YUI method hooks. You may need to change this value to fit your layout, but I'm hoping it will work for you.
Sorry the CSS alteration is jQuery. I have never used YUI before and haven't got any idea how to change CSS properties in YUI :-)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#myAutoComplete {
width:15em; /* set width here or else widget will expand to fit its container */
padding-bottom:2em;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bgiframe.min.js"></script>
</head>
<body class="yui-skin-sam">
<div id="myAutoComplete">
<label for="myInput">Enter a state:</label><br/>
<input id="myInput" type="text"/>
<div id="myContainer"></div>
</div>
<div>
<form action="#" method="get" accept-charset="utf-8">
<p>
<select>
<option value="val1">val1</option>
<option value="val2">val2</option>
</select>
</p>
</form>
</div>
<script type="text/javascript">
$(function() {
$('#myContainer').bgiframe();
});
YAHOO.example.Data = {
arrayStates: [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'New Hampshire',
'New Jersey',
'New Mexico',
'New York',
'Wyoming'
]
}
YAHOO.example.BasicLocal = function() {
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
var restoreHeight = function(sType, aArgs) {
$('#myContainer').css({height:'auto'});
};
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.prehighlightClassName = "yui-ac-prehighlight";
// oAC.useIFrame = true; // works but changes the container into an iFrame a bit too late for my liking
oAC.doBeforeExpandContainer = function () {
$('#myContainer').css({height:'50px'}); // might need to play around with this value
return true;
}
// restore height
oAC.containerCollapseEvent.subscribe(restoreHeight);
oAC.useShadow = true;
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
</body>
</html>