I am using the input mask jQuery plugin but I am unable to see placeholder text by default but on hover it will be displayed.
$("input[name='birth_year_1']").inputmask("dd/mm/yyyy", {
placeholder: "dd/mm/yyyy"
});
Set the clearMaskOnLostFocus option
$(document).ready(function(){
$("#date").inputmask("99/99/9999",{ "placeholder": "dd/mm/yyyy", clearMaskOnLostFocus: false});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/jquery.inputmask#5.0.6/dist/jquery.inputmask.min.js" type="text/javascript"></script>
</head>
<body>
<input id="date" type="text" value="" />
</body>
</html>
Related
When I am trying to change background colour of body (background color changer project)using jquery, it changes and again comes to default background-color.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background-Color Changer</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<form action="">
<h3>Change the Background-Color (Hex code only)</h3>
<input type="text" name="" id="name" maxlength="7" placeholder="#" />
<button id="btn1" type="submit">Change</button>
</form>
</div>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/main.js"></script>
</html>
JS:
$(document).ready(function () {
$("#btn1").click(function () {
$('body').css("background-color", $("#name").val());
});
});
Your button is inside a form, so when you click it, the form is submitted, and the page is reloaded. To prevent the form from being submitted, you can do this:
$("#btn1").click(function (evt) { // <- the event
$('body').css("background-color", $("#name").val());
evt.preventDefault(); // prevent the default behavior for that event
});
More info on Event.preventDefault()
Using the javascript i am trying to disable users input after rich 80 charecters and if they press "Backspace" and remove some charecters then they can enter text again until rich again to 80. I have written code bellow but dont know why its not working. Any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>
<input type="text" class="form-control" id="editText" aria-describedby="basic-addon2" value="Something">
<span class="input-group-addon" id="basic-addon2">/80</span>
<script type='text/javascript'>
$('#editText').keyup(updateCount);
$('#editText').keydown(updateCount);
function updateCount() {
var limitText = "/80";
var lengthNumber = $(this).val().length;
if (lengthNumber>80) {
$("#editText").keydown(false);
}else{
$("#editText").keydown(true);
}
$('#basic-addon2').text(lengthNumber+limitText);
}
</script>
</body>
</html>
<input type="text" name="usrname" maxlength="80">
You can use maxlength tag.
You can directly use input property maxlength="80":
<input maxlength="80">
https://jsfiddle.net/ramseyfeng/wph565xu/
If you cant use maxlength property, and you MUST use javascript / JQuery, you could use bellow code
var limitText = 10;
$('#editText').keydown(function(e){
if ($(this).val().length > limitText)
{
if (e.keyCode != 8)
{
e.preventDefault();
return false;
}
}
});
Demo : https://jsfiddle.net/5dctLbxq/
I wanted save value in inputbox to JS variable, but when i save it, doesn't appear in console, why? thanks for advice
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Color Picker</title>
<link href="color-picker.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
</head>
<body>
<p><input type="text"></p>
<script src="color-picker.min.js"></script>
<script>
var picker = new CP(document.querySelector('input'));
picker.on("change", function(color) {
this.target.value = '#' + color;
})
function colorpick() {
var el = document.querySelector('input');
console.log(el);
}
</script>
<input onclick="colorpick()" type="button" class="button" value="Submit">
</body>
</html>
I am not sure what are you trying to accomplish but colorpick function is only selector of the input element itself. You need console.log(el.value) instead.
I am using select2 in my project. As per design, I am removed the search box in selectbox2, but after removed search box, keyboard select option not works. Could any one help me to fix this. - Thanks
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select2 Template</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
</head>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<body>
<div>Skills</div>
<select id="skills" style="width: 200px">
<option>html</option>
<option>css</option>
<option>js</option>
</select>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('#skills').select2({
minimumResultsForSearch: Infinity
});
});
</script>
</body>
</html>
JS Bin: http://jsbin.com/kipuzet/edit?html,output
Instead of
$('#skills').select2()
use
$('#skills').select()
That should work.
I need a 2-handle slider which displays the handle value when I move it. I am using nouislider. I am having problem making it work. I stripped off unwanted most code and will add the move and change good stuff later. How do I initialize the slider? Below is my code:
<!DOCTYPE html>
<html>
<head>
<title>jQuery No UI Slider - Range slider</title>
<link rel="stylesheet" href="nouislider.css" />
<link rel="stylesheet" href="site.css" />
<script src="jquery-1.8b1.js"></script>
<script src="jquery.nouislider.js"></script>
</head>
<body>
<div class="example">
<div id="noUiSlider" class="noUiSlider"></div>
<div id="valueInput">
START <input type="text" id="start" value="0"/></label>
END <input type="text" id="end" value="60"/></label>
</div>
<script>
window.onload =$(function(){
$("#noUiSlider").empty().noUiSlider( 'init', {
handles: 2,
connect: true,
scale:[10,30],
start:[0,60]
});
</script>
</div>
</body>
</html>
$(function() {
$("#noUiSlider").noUiSlider({
handles: 2,
connect: true,
scale:[10,30],
start:[0,60]
});
});