how to get a html input position (top and right attributes values) in javascript

Question

i have created a virtual numberic keypad by javascript. this keypad position attribute is fixed (or can be absolute) and it's top and left attributes have determind in css. when user focuses a text input, (by a function that fires by "onfocus" event) the key pad appears in page and the user can type numbers in the focused input (like secure virtual keypads in Banks payment gateways but numbers place of my keypad aren't as random). my keypad container tag css codes is as following codes:

#numPadContainer {
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 1; /* Sit on top */
    right: 1000px;
    top: 260px;
    text-align: center;
}

with this css code the place of keypad is same for all of inputs. but i like my virtual key pad appears under the focused input. for this issue i need to get the place of focused input in javascript (the top and right attribiutes of focuased input) then change them. but following js code doesn't return these atributes. (my inputs position attribute is static)

let x=document.getElementByID("firstInput").style.right;
let y=document.getElementByID("firstInput").style.top;

can you present me a js method to get x and y attribute of focuased input or another way to appear my virtual keypad under the focused text input?

Answer 1

const elem = document.getElementByID("firstInput")
const { top, right, left, bottom } = elem.getBoundingClientRect();

Tip : Always use const when declaring variables, change it to let only when you have to reassign the value

You can't rely on style to give you the actual value cos styles are declared rules, they don't change if the position of the elements changes on the page (with JS).

getBoundingClientRect returns the actual position of the element.

Answer 2

hi one of friends Mr Vivek K request for my virtual keypad codes. this is my codes but not professional. as the first step put this tag in page that you want use keypad there:

    <div id="numPadContainer"></div>

now you need 3 file.a css file a js file and a php file as model that recives ajax request and create the keypad html code for insert to above div tag. these three file codes:

javascript:

 function appearNumPad(obj){ let numPadContainer=document.getElementById("numPadContainer"); //--------- this part is for set the keypad under focused input ---------- //-- if dont use this code the keypad appear in a stable point of page -- // let elem = document.getElementById(obj.id); // let { top, right, left, bottom } = elem.getBoundingClientRect(); // // let x= Math.floor(left)+90; // let y= Math.floor(top)+60; // // numPadContainer.style.top=y+"px"; // numPadContainer.style.left=x+"px"; //------------------------------------------------------------------------ numPadContainer.style.display = "block"; //step1: let request = new XMLHttpRequest; //step2: request.open("GET", "../common/numPad.php?inputID="+obj.id); //step3: request.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { document.getElementById("numPadContainer").innerHTML=this.responseText; dispatchKeyUpEventToTextInput(obj.id); } }; //step4: request.send(); } function typeDigit(pushedKeyValue,inputID){ dispatchKeyUpEventToTextInput(inputID); document.getElementById(inputID).focus(); let inputValue=document.getElementById(inputID).value; let maximumLength=document.getElementById(inputID).maxLength; if(isNaN(pushedKeyValue)){ if(pushedKeyValue=="backspace"){ inputValue=inputValue.slice(0,-1); document.getElementById(inputID).value=inputValue; } if(pushedKeyValue=="delete"){ document.getElementById(inputID).value=""; } }else{ if(inputValue.length<maximumLength) { inputValue = inputValue + pushedKeyValue; document.getElementById(inputID).value = inputValue; } } } function disappearNumPad(){ document.getElementById("numPadContainer").innerHTML=''; document.getElementById("numPadContainer").style.display = "none"; } function dispatchKeyUpEventToTextInput(inputID){ // keyup handler fire by click on keypad buttons let myInput = document.querySelector('#'+inputID); let keyupEvent = new KeyboardEvent("keyup"); myInput.dispatchEvent(keyupEvent); } css:

 #numPadContainer { direction: ltr; display: none; /* Hidden by default */ position: absolute; /* Stay in place */ z-index: 1; /* Sit on top */ left: 1000px; top: 225px; text-align: center; } #numPad{ text-align: center; box-shadow: var(--object-shadow-size) var(--formsAndMenus-shadow-color); border: solid var(--object-border-size) var(--formsAndMenus-border-color); border-radius: var(--box-border-radius); background: var(--form-background-color); } #numPad td{ padding: 5px; }.numPadBtn,#closeNumPadBtn,#deleteBtn,#backspaceBtn{ padding: 0px; width: 45px; height: 45px; background-size:45px 45px; cursor: pointer; font-family: "B Koodak"; border: none; border-radius: var(--box-border-radius); color: white; }.numPadBtn{ font-size: 25px; background: url("../images/numPad_blue.png") no-repeat; background-size:45px 45px; }.numPadBtn:hover{ background: url("../images/numPad_green.png") no-repeat; background-size:45px 45px; } #closeNumPadBtn{ /* verify key pad button */ width: 159px; height: 40px; font-size: 20px; background: url("../images/numPad_wide_blue.png") no-repeat; background-size:159px 40px; } #closeNumPadBtn:hover{ /* verify key pad button on hover */ background: url("../images/numPad_wide_green.png") no-repeat; background-size:159px 40px; } #deleteBtn{ /* clear key pad button */ background: url("../images/numPad_delete.png") no-repeat center; background-size:45px 45px; } #deleteBtn:hover{ /* clear key pad button on hover */ background: url("../images/numPad_delete_green.png") no-repeat center; background-size:45px 45px; } #backspaceBtn{ /* backspace key pad button */ background: url("../images/numPad_backspace.png") no-repeat center; background-size:45px 45px; } #backspaceBtn:hover{ /* backspace key pad button on hover */ background: url("../images/numPad_backspace_green.png") no-repeat center; background-size:45px 45px; } php (& html):

 <?php if(isset($_GET["inputID"])){?> <table border="0px" id="numPad"> <?php $digit=0; for($i=1;$i<=3;$i++){?> <tr> <?php for($j=0;$j<=2;$j++){ $digit++; ?> <td> <input type="button" class="numPadBtn" value="<?php echo $digit;?>" onclick="typeDigit(this.value,'<?php echo $_GET["inputID"]?>')" /> </td> <?php }?> </tr> <?php }?> <tr> <td> <input type="button" id="backspaceBtn" onclick="typeDigit('backspace','<?php echo $_GET["inputID"]?>')"/> </td> <td> <input type="button" class="numPadBtn" value="0" onclick="typeDigit(this.value,'<?php echo $_GET["inputID"]?>')"/> </td> <td> <input type="button" id="deleteBtn" onclick="typeDigit('delete','<?php echo $_GET["inputID"]?>')"/> </td> </tr> <tr> <td colspan="3"> <input type="button" id="closeNumPadBtn" value="verify" onclick="disappearNumPad();"/> </td> </tr> </table> <?php }

some notice for codes:

1. this way is mine and not profassional and i sure there is so beter way to create virtual key pad.

2. i use some image for keys of keypad background that you use your desire background picture. notice to css styles for name of this images.

3. you most add an event to the text inputs that you want this keypad use for them. add following event to inputs: onfocus="appearNumPad(this);"

4. i have needed to do some validations in my inputs by keyup events. so i send keyup event by dispatchEvent method to inputs by click on keypad buttons. the last function of js codes is for this issue.

5. in javascript code i have used ajax object and have sent ajax request to a php file that contains php codes. the url is the addres of this file. i hope it be useful for you. tnx