I have an input field that I cannot use a placeholder for, instead I must use a label and place it as it was a placeholder, so right in the field. How can I hide the label when you start typing into the field, and make the label reappear hen all letters are removed from the field - so just like the placeholder ould behave?
My html:
<label class="PR_label" for="PR">My label</label>
<input type="hidden" name="PR" value="" id="TR">
EDIT: I realised this is not possible since my input field is hidden and you cannot enter/type anything since there is no fied to begin with.
You can place the label inside the textbox using position: absolute; and then hide the label when the user types, using an event listener:
var textbox = document.getElementById("input_box")
var label = document.getElementById("label")
textbox.addEventListener("keydown", function() {
label.style.display = "none"
}, false);
#input_box {
position: absolute;
top: 0;
left: 0px;
}
#label {
position: absolute;
top: 0;
left: 0px;
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input value="" id="input_box">
<label id="label">Lorem ipsum</label>
<script src="code.js"></script>
</body>
</html>
If you want use your label as placeholder in your input field you can use CSS position.
* {
box-sizing: border-box;
}
.form-control {
width:50%;
padding: 0.625rem;
position: relative;
}
label {
position: absolute;
top: 1.7rem;
right: 1.625rem;
color: blue;
}
input[type="text"] {
display: block;
width: 100%;
padding: 1rem;
}
<div class="form-control">
<label class="PR_label" for="PR">test</label>
<input type="text" name="PR" value="a" id="TR">
</div>
HTML:
<div class='wrapper'>
<label class="PR_label" for="PR">My label</label>
<input type="hidden" name="PR" value="" id="TR">
</div>
If you plan to make it visible again:
const labelElement = document.querySelector('.PR_label')
const inputElement = document.querySelector('input')
inputElement.addEventListener('keydown', () => {
labelElement.style.display = 'none'
})
If you plan to not make it visible again:
const labelElement = document.querySelector('.PR_label')
const inputElement = document.querySelector('input')
inputElement.addEventListener('keydown', () => {
labelElement.remove()
})
css:
.wrapper {
display: grid;
grid-template: 1fr / 1fr;
}
input,
.PR_label {
grid-row: 1;
grid-column: 1;
}
Make use of a placeholder inside your input and also don't forget to add alternative keys for accessibility checks.
WITH PLACEHOLDER
<input id="TR" class="text" type="text" name="PR" value="" placeholder="PR" alt="PR">
WITHOUT PLACEHOLDER
Using jQuery
$(".input").each(function () {
var inputVal = $(this).val();
$(this)
.focus(function (event) {
if (this.value == inputVal) {
this.value = "";
}
})
.blur(function (event) {
if (this.value == "") {
this.value = inputVal;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="Example Value" class="input">
Related
I have an input field type password, I'm trying to put show / hide icon inside it. The problem is the icon, it is actually another input field and with html I can't put an input field inside another input field.
Can someone help me ? Maybe with css there can be a solution?
Sorry but I'm not very good with this, I appreciate any answer, thanks.
function showPassword() {
var x = document.getElementById("password_current");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
/*Toggle Password class*/
#togglePw { display: none; }
#togglePw + label:before { content: "\f06e"; }
#togglePw:checked + label:before { content: "\f070"; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<p class="">
<label class="t2" for="password_current"></label>
<input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/> <input type="checkbox" id="togglePw" onclick="showPassword()"/>
<label for="togglePw" class="fa"></label>
</p>
I would suggest using absolute positioning to align the icon.
Wrap the two inputs (password & checkbox) in a div.
<div id="password-input-toggle">
<input id="your-password-field"/>
<input type="checkbox" id="your-toggle-checkbox"/>
</div>
#password-input-toggle {
position: relative;
}
#your-toggle-checkbox {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
Just use some CSS to nudge it left a little, not forgetting to allow for padding on the input control so text won't cover it.
function showPassword() {
var x = document.getElementById("password_current");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
/*Toggle Password class*/
#togglePw {
display: none;
}
#togglePw+label:before {
content: "\f06e";
}
#togglePw:checked+label:before {
content: "\f070";
}
/* add these: */
#togglePw+label {
position: relative;
left: -30px;
cursor: pointer;
}
#password_current {
padding-right: 30px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<p class="">
<label class="t2" for="password_current"></label>
<input type="password" class="field-settings" name="password" id="password_current" autocomplete="off" /> <input type="checkbox" id="togglePw" onclick="showPassword()" />
<label for="togglePw" class="fa"></label>
</p>
I am making a unit converter with two input fields, one for centimeters and the other for inches. I was wondering if it would be possible for one of the fields to be changed to read only if there is input in the other field. Here is my code for one of the fields:
<input name="cm" class="inputs peach Calibri" type="number" min="0" step="1" />.
Any help would be appreciated. Thanks!
This would be a fairly good starting point.
let cmInput = document.getElementById("cminput");
let inInput = document.getElementById("inchinput");
cmInput.onkeyup = function(){
if(cmInput.value !== ""){
inInput.disabled = true;
}else{
inInput.disabled = false;
}
};
inInput.onkeyup = function(){
if(inInput.value !== ""){
cmInput.disabled = true;
}else{
cmInput.disabled = false;
}
};
<input type="text" placeholder="centimetres" id="cminput">
<input type="text" placeholder="inches" id="inchinput">
Not the cleanest way but it works just add your logic for conversion. This also remove readonly attr when input field is empty
jsfiddle (click me)
<label for="cm">cm: </label>
<input name="cm" id="cm" class="inputs peach Calibri" type="number" min="0" step="1" />
<label for="inch">inch: </label>
<input name="inch" id="inch" class="inputs peach Calibri" type="number" min="0" step="1" />
$('#cm').on('keyup', function() {
if ($('#cm').val() != '') {
$('#inch').prop('readonly', true);
} else if ($('#cm').val() == '') {
$('#inch').prop('readonly', false);
}
});
$('#inch').on('keyup', function() {
if ($('#inch').val() != '') {
$('#cm').prop('readonly', true);
} else if ($('#inch').val() == '') {
$('#cm').prop('readonly', false);
}
});
would you consider another pattern for this?
The readonly solution is pretty straigh forward, but a lot of sites with not only numeric convertion, for example, google translate, use a button to switch the convertion leaving the right side of the converter control with a read only, so if you want to make something like this in order to follow a more standart pattern
here it is
$('button').on('click',function(){
$('.cont').toggleClass('invert')
});
$('input').on('keypress',function(){
if($('.cont').hasClass('invert')){
// some convertion code for INCH to CM
}else{
// some convertion code for CM to INCH
}
});
.cont{
display:flex;
align-items: center;
justify-content: center;
border:1px solid silver;
}
.cont.invert{
flex-direction: row-reverse;
}
fieldset{
border:none;
position:relative;
}
button{
display: block;
line-height: 22px;
}
.cont.invert fieldset:first-child:after{
content:"";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top:0px;
background-color: rgba(255,255,255,.3);
}
.cont.invert fieldset:last-child:after{
display: none;
}
.cont fieldset:last-child:after{
content:"";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top:0px;
background-color: rgba(255,255,255,.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<fieldset>
<label for="inp1">CM</label>
<br>
<input type="text">
</fieldset>
<button>
< >
</button>
<fieldset>
<label for="inp1">INCH</label>
<br>
<input type="text">
</fieldset>
</div>
As you can see, i did not disabled the input, i used a block to cover it from editing, the block on top of the right input has a white background with alpha on it, this way, if you want, you can control the way of the "disabled" one, no touching the input´s css and may looks the same on every browser.
Hope this helps
You could call a js function oninput like so:
<input type="text" id="cm" oninput="input('cm')"/>
<input type="text" id="inch" oninput="input('inch)"/>
function input(which){
if(which === 'cm'){
if(document.getElementById('cm').value!= ''){
document.getElementById('inch').disabled = true;
}else{
document.getElementById('cm').disabled = false;
}
}else{
if(document.getElementById('inch').value!= ''){
document.getElementById('cm').disabled = true;
}else{
document.getElementById('inch').disabled = false;
}
}
}
This question already has answers here:
How to prevent a user from removing the first three characters in a text input?
(6 answers)
Closed 4 years ago.
So I have a text input
<input type="text" value="+98912314789" class="telinfo">
Is there a way to keep 4 letter from the begin ?
I want to keep +9891 read only and the user can delete all part of this textbox except this part.
You can capture the keyup and blur (in case user directly copy paste the value in textbox) event
function handleEv( event )
{
var thisObj = event.currentTarget;
var fixedValue = thisObj.getAttribute( "data-fixedvalue" );
if ( thisObj.value.indexOf( fixedValue ) != 0 )
{
console.log(thisObj.value, fixedValue);
event.preventDefault();
thisObj.value = fixedValue;
}
}
Demo of sample implementation
var el = document.querySelector( ".telinfo" );
el.addEventListener( "keyup", handleEv);
el.addEventListener( "blur", handleEv);
function handleEv( event )
{
var thisObj = event.currentTarget;
var fixedValue = thisObj.getAttribute( "data-fixedvalue" );
if ( thisObj.value.indexOf( fixedValue ) != 0 )
{
console.log(thisObj.value, fixedValue);
event.preventDefault();
thisObj.value = fixedValue;
}
}
<input type="text" value="+98912314789" class="telinfo" data-fixedvalue = "+9891">
try this code may be it will help to resolve your issue
<input type="text" value="+98912314789" class="telinfo" id="telphone" onchange="staticData()" onkeyup="staticData()">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function staticData(){
var data=$("#telphone");
if(data.val().length<5)
{
data.val("+9891");
data.attr("readonly",true);
}
else
{
data.attr("readonly",false);
}
}
</script>
This question solved by #gurvinder372 but you could achieve this easier than it with Regex pattern:
function phoneNumber(selector, num) {
$(selector).on('input', function() {
var reg = /\+/gi;
if (!$(this).val().match(reg)) {
$(this).val($(this).val().replace(/([\d]+)/g, "+" + num + "$1"));
}
});
}
phoneNumber('.telinfo', '9891');
phoneNumber('.mobinfo', '78');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" placeholder="+9891" class="telinfo">
<input type="text" value="" placeholder="+78" class="mobinfo">
Update: Also I converted this to function to usable multiple times.
Try using two inputs one for readonly and second for editing -
<input type="text" value="+9891" readonly>
<input type="text" value="" class="telinfo">
Wrap it in a container to add both inputs on the same line.
The easiest way is separating the read-only text from input text
<input type="text" value="+9891" size="3" disabled>
<input type="text" value="">
make css and html like below change style as per your requirement
<div class="field">
<input type="text" value="" class="telinfo">
</div>
.field{
float: left;
width: 100%;
position: relative;
max-width: 240px;
}
.field:before{
content: "+9891";
position: absolute;
left: 15px;
top: 10px
}
.field input{
background: #fff;
border: 1px solid #ddd;
padding: 10px 15px 10px 58px;
font-size: 14px;
line-height: 18px;
color: #000;
}
I am trying to make a calculator program in php code.
I made it using html and javascript, but I've been told to use php code for the logical part.
Is there any way we can take more than one input from a textbox, in a php form ?
Yes, you can easily use multiple inputs in a form, by giving them different names and accessing them through $_REQUEST['input_name'].
In this example, what I am doing is taking the selected checkboxes from the popup and putting them into the text input field in the main form as a comma-separated list.
HTML
<input type="text" id="entry-r1" placeholder="place" tabindex="1">
<a class="show-lookup button" href="#" id="popup-r1" tabindex="2"><i class="fa fa-search"></i></a>
<div class="overlay"> </div>
<div class="lookup-multiselect" id="lookup-r1">
<a class="button close-button right">x</a>
<form action="" id="form-r1" name="form-r1" method="post">
<input class="checkall" id="checkall" type="checkbox">
<label for="checkall" class="narrow">Select all</label>
<p class="category" id="checkboxes-r1"><strong>Select...</strong><br>
<input class="js-popup-focus" type="checkbox" name="place" id="antwerp" value="Antwerp" tabindex="3"> <label for="antwerp">Antwerp</label><br>
<input type="checkbox" name="place" id="berlin" value="Berlin" tabindex="3"> <label for="berlin">Berlin</label><br>
<input type="checkbox" name="place" id="cairo" value="Cairo" tabindex="3"> <label for="cairo">Cairo</label><br>
<input type="checkbox" name="place" id="duss" value="Düsseldorf" tabindex="3"> <label for="duss">Düsseldorf</label><br>
</p>
</form>
Use selected
</div>
CSS
.overlay {
display: none;
position: fixed;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.7;
background: #333;
}
.lookup-popup, .lookup-multiselect {
padding: 0.5em;
display: none;
z-index: 99999;
background-color: #fff;
position: absolute;
top: 5em;
left: 25%;
width: 20%;
}
jQuery
$(document).ready(function ()
{
/* get id of form to work with */
$('.show-lookup').click(function()
{
var pairedId = $(this).attr('id').split('-');
var lookupToDisplay = '#lookup-' + pairedId[1];
$('.overlay').show();
$(lookupToDisplay).show();
$('.js-popup-focus').focus();
});
/* put value selected in lookup into field in main form */
$('.lookup-popup input').on('change', function()
{
var fieldname = $(this).attr('name');
var pairedId = $(this).parent().attr('id').split('-');
var selOption = $('input[name='+fieldname+']:checked').val();
$("#entry-"+pairedId[1]).val(selOption);
});
/* for checkbox version, append selected values to field in main form */
$('.lookup-multiselect input').on('change', function()
{
var pairedId = $(this).parent().attr('id').split('-');
//event.preventDefault();
var selOptions = $(".category input:checkbox:checked").map(function(){
return $(this).val();
}).get(); // <----
//console.log(selOptions);
var selectedString = selOptions.toString();
$("#entry-"+pairedId[1]).val(selOptions);
});
$('.close-button').click(function()
{
$(this).parent().hide();
var pairedId = $(this).parent().attr('id').split('-');
$('.overlay').hide();
$("#entry-"+pairedId[1]).focus();
});
});
I want to change background of checkbox without using jQuery (if is that possible of course), because I'm not familiar with that library.
HTML:
<form name="checkBox">
<input onchange="checkbox()" type="checkbox" class="cbox" />
</form>
JS:
function checkbox(){
var checkbox = document.getElementByClass('cbox');
if(document.getElementById('cbox').checked === true){
checkbox.style.background = "url('uncheck.png')";
}else{
checkbox.style.background = "url('check.png')";
}
}
You are mixing class names and ID's. Try this.
HTML:
<form name="checkBox">
<input onchange="checkbox()" type="checkbox" id="cbox" />
</form>
JS:
function checkbox(){
var checkbox = document.getElementById('cbox');
if(checkbox.checked === true){
checkbox.style.background = "url('uncheck.png')";
}else{
checkbox.style.background = "url('check.png')";
}
}
How about a pure CSS solution without any need to use images: http://jsfiddle.net/7qcE9/1/.
HTML:
<form name="checkBox">
<input type="checkbox" id = "checkbox1" />
<label for = "checkbox1"></label>
</form>
CSS:
form > input[type = "checkbox"] {
display: none;
}
form > label {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 3px;
font-size: 20px;
text-align: center;
cursor: pointer;
}
form > input[type = "checkbox"]:checked + label:before {
content:'\2714';
}
You can pass a reference to the checkbox using this in the inline handler as follows:
html
<form name="checkBox">
<input onchange="checkbox(this)" type="checkbox" class="cbox" />
</form>
js
function checkbox(elm){ // elm now refers to the checkbox
if(elm.checked === true){
elm.style.background = "url('uncheck.png')";
}else{
elm.style.background = "url('check.png')";
}
}
So that you can use the function for n number of elements.