You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
271 lines
9.5 KiB
271 lines
9.5 KiB
<html>
|
|
<head>
|
|
<!-- /**
|
|
* Copyright (c) 2020. ExacTI Technology Solutions
|
|
* MIT License.
|
|
* https://exacti.com.br
|
|
* floating-labels - https://github.com/exacti/floating-labels
|
|
*/ -->
|
|
<title>Hello, world!</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
|
|
<link rel="stylesheet" type="text/css" href="floating-labels.css" media="screen">
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.0/build/css/intlTelInput.min.css" media="screen">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/js/intlTelInput.min.js"></script>
|
|
<style>
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<h1 class="mb-5">Bootstrap floating labels demo</h1>
|
|
|
|
<div class="row">
|
|
<div class="col-md">
|
|
<h3 class="mt-5 mb-3">Normal</h3>
|
|
|
|
<div class="mb-3">
|
|
<input type="text" id="tt2" class="form-control shadow-none" placeholder="Floating Label" />
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<input type="text" id="tt3" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<textarea id="tt" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<select class="custom-select" id="">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md">
|
|
<h3 class="mt-5 mb-3">Float</h3>
|
|
|
|
<div class="form-label-group">
|
|
<input type="text" id="tt5" class="form-control shadow-none" placeholder="Floating Label" />
|
|
<label for="tt5">Floating Label</label>
|
|
</div>
|
|
|
|
<div class="form-label-group">
|
|
<input type="text" id="tt6" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
|
|
<label for="tt6" class="form-control-lg">Floating Label lg</label>
|
|
</div>
|
|
|
|
<div class="form-label-group">
|
|
<textarea id="tt4" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
|
|
<label for="tt4">Floating Label area</label>
|
|
</div>
|
|
|
|
<div class="form-label-group">
|
|
<select class="custom-select shadow-none" id="ttsel1">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
<label for="ttsel1" >Floating Label</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md">
|
|
<h3 class="mt-5 mb-3">Float In-Border</h3>
|
|
|
|
<div class="form-label-group in-border">
|
|
<input type="text" id="tt8" class="form-control shadow-none" placeholder="Floating Label" />
|
|
<label for="tt8">Floating Label</label>
|
|
</div>
|
|
|
|
<div class="form-label-group in-border">
|
|
<input type="text" id="tt9" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
|
|
<label for="tt9" class="form-control-lg">Floating Label lg</label>
|
|
</div>
|
|
|
|
<div class="form-label-group in-border">
|
|
<textarea id="tt7" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
|
|
<label for="tt7">Floating Label area</label>
|
|
</div>
|
|
|
|
|
|
<div class="form-label-group in-border">
|
|
<select class="custom-select" id="ttsel2">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
<label for="ttsel2" >Floating Label</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md">
|
|
<h3 class="mt-5 mb-3">Float Outline</h3>
|
|
|
|
<div class="form-label-group outline">
|
|
<input type="text" id="tt8" class="form-control shadow-none" placeholder="Floating Label" />
|
|
<span><label for="tt8">Floating Label</label></span>
|
|
</div>
|
|
|
|
<div class="form-label-group outline">
|
|
<input type="text" id="tt9" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
|
|
<span><label for="tt9" class="form-control-lg">Floating Label lg</label></span>
|
|
</div>
|
|
|
|
<div class="form-label-group outline">
|
|
<textarea id="tt7" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
|
|
<span><label for="tt7">Floating Label area</label></span>
|
|
</div>
|
|
|
|
|
|
<div class="form-label-group outline">
|
|
<select class="custom-select" id="ttsel2">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
<span><label for="ttsel2" >Floating Label</label></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="mt-5">Intl-tel-input</h3>
|
|
<div class="row">
|
|
|
|
<div class="col-sm">
|
|
<h4 class=" mb-3">Float</h4>
|
|
<div class="form-label-group">
|
|
<input name="tel[main]" type="tel" class="form-control" data-parsley-phone-validate id="tel" placeholder="Telefone" />
|
|
<label for="tel">Telefone</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<h4 class=" mb-3">Right Float</h4>
|
|
<div class="form-label-group iti-right">
|
|
<input name="tel[main]" type="tel" class="form-control" data-parsley-phone-validate id="tel" placeholder="Telefone" />
|
|
<label for="tel">Telefone</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<h4 class="mb-3">Float In-Border</h4>
|
|
<div class="form-label-group in-border">
|
|
<input name="tel[main]" type="tel" class="form-control" data-parsley-phone-validate id="tel" placeholder="Telefone" />
|
|
<label for="tel">Telefone</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<h4 class="mb-3">Right Float In-Border</h4>
|
|
<div class="form-label-group in-border iti-right">
|
|
<input name="tel[main]" type="tel" class="form-control" data-parsley-phone-validate id="tel" placeholder="Telefone" />
|
|
<label for="tel">Telefone</label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md">
|
|
<div class="card text-white bg-warning mx-auto mb-3" style="max-width: 18rem;">
|
|
<div class="card-header"><h4 class="m-0"> Float Outline</h4></div>
|
|
|
|
<div class="card-body">
|
|
<div class="form-label-group outline border-danger ">
|
|
<input name="tel[main]" type="tel" class="form-control border-white text-white" data-parsley-phone-validate id="tel4" placeholder="Telefone" />
|
|
<span class="labe"><label for="tel4" class="text-white">Telefone</label></span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="col-md">
|
|
<div class="card text-white bg-dark mx-auto mb-3" style="max-width: 18rem;">
|
|
<div class="card-header"><h4 class="m-0">Right Float Outline</h4></div>
|
|
|
|
<div class="card-body">
|
|
<div class="form-label-group outline iti-right border-warning">
|
|
<input name="tel[main]" type="tel" class="form-control text-white" data-parsley-phone-validate id="tel4" placeholder="Telefone" />
|
|
<span class="labe"><label for="tel4" class="text-white">Telefone</label></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
const telInput = document.querySelectorAll('input[type="tel"]');
|
|
|
|
telInput.forEach(function(element, index, array){
|
|
var iti = [];
|
|
iti[index] = window.intlTelInput(element, {
|
|
initialCountry: "auto",
|
|
geoIpLookup: function(callback) {
|
|
$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
|
|
var countryCode = (resp && resp.country) ? resp.country : "BR";
|
|
/* $("#pais").val(resp.country);
|
|
$("#estado").val(resp.region);
|
|
$("#cidade").val(resp.city);
|
|
//alert(resp.country); */
|
|
callback(countryCode);
|
|
});
|
|
},
|
|
utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.0/build/js/utils.min.js",
|
|
autoPlaceholder: "aggressive",
|
|
preferredCountries: ["br", "us", "ca", "uy"],
|
|
hiddenInput: "full",
|
|
customContainer: "d-flex intl-tel-input",
|
|
formatOnDisplay: true
|
|
});
|
|
|
|
element.addEventListener('keyup', function(){
|
|
formatIntlTelInput(iti[index]);
|
|
});
|
|
element.addEventListener('change', function(){
|
|
formatIntlTelInput(iti[index]);
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
function formatIntlTelInput(e) {
|
|
//console.log(e);
|
|
if (typeof intlTelInputUtils !== 'undefined') { // utils are lazy loaded, so must check
|
|
var currentText = e.getNumber(intlTelInputUtils.numberFormat.E164);
|
|
if (typeof currentText === 'string') { // sometimes the currentText is an object :)
|
|
e.setNumber(currentText); // will autoformat because of formatOnDisplay=true
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
$('.intl-tel-input, .iti').find('input.form-control').each(function(index, element) {
|
|
let label = $(element).parent().find('~ label, ~ .labe');
|
|
$(element).after(label);
|
|
//console.log(label);
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |