How to find css unit for this number

Question

I have a input type text

<input type="text">

Basically I am using javascript ClientRect to get caret details. ClientRect looks like this

[object ClientRect]
  {
     [functions]: ,
     __proto__: { },
     bottom: 540.7999877929687,
     constructor: { },
     height: 24,
     left: 1034.5399169921875,
     right: 1034.5399169921875,
     top: 516.7999877929687,
     width: 0
  }

This is generated on everytext input.

left: 1034.5399169921875,
left: 1065.5399169921875,
left: 1078.5399169921875,

I want to convert this number to CSS units like px/%/rem/vh. So that I can put dynamic css. How to do it?

Oas

Although I can't find the relevant documentation just yet, I'm pretty sure that the returning values of getBoundingClientRect are all in pixels. – Clance

I guess the actual function you're calling is Element.getClientRects(). In this case the returned values are pixel values. Read developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects – Carolacarolan

1034 cannot be pixles.. The actual width in pixles would be around 35px – Oas

@Oas 1034 isn't your width, it's the left position of your element. It also is the right position of your element, hence your width: 0 - It seems to always be in pixels. If you for example specify a height of 30pt on your element getClientRects() will still give you the height in pixels. – Leoine

@Fran thanks for the explaination.. But still how do i find the left width in pixles to put it in css? – Oas

What are you actually looking for? The position of the caret inside of a text box? I believe you would benefit from exposing your needs ratter than your solution! It is hard to guess the value to put into a css rule when we have no clue what the css rule is supposed to do. – Ulm

That 1034(for example) is already in pixels, it's the distance of the elements position relative to the left of viewport – Evette

maybe this can help: #9013335 – Aha

Answer 1

Try accessing the left position of your input and subtract the left position of your caret. This should give you an approximate width of the text in the input, if that's what you are looking for. You'll need to add an id or create a selector for your text input.

var inputElementRect = document.getElementById('YOURINPUTID').getBoundingClientRect()
var width = inputElementRect.left - caretRect.left

Indefectible

Answer 2

Those values are px by default .. so just add suffix as px to that value and use it.

<input type="text">

to get that value

let text = document.querySelector('input');
let values = text.getBoundingClientRect();

let top_value = values.top + 'px';
let bottom_value = values.bottom + 'px';
let width_value = values.width + 'px';
let height_value = values.height + 'px';


console.log('top: '+ top_value);
console.log('bottom: '+ bottom_value);
console.log('width: '+ width_value);
console.log('height: '+ height_value);

---

here properties other than width and height are relative to the view port ( top, bottom, left, right ) ,

so if scroll this values will changes .. to get the perfect values even if scroll add this values with window.scrollX , window.scrollY or can use window.pageXOffset , window.pageYOffset

Sperling

Answer 3

So if I understand the question correctly, you have position values for the cursor inside of the input and you want to convert it into different types of CSS units, presumably so you can do something to the input or related things

The first thing to understand is that ClientRect positions are relative to the viewport. So as vhutchinson pointed out, if you want the width of text you need to compare to the input's "left" value as defined by getBoundingClientRects. That's a good start, but if you're not just influencing left but also care about top, you need to account for scrolling. If your window/page is the only scrolling container, you should be able to do this simply by adding window.scrollY to top, and window.scrollX to left to understand your offset relative to the window.

All of these units are pixels by default... if you want to convert to rem it's pretty straightforward, 1 rem = the font-size of your root element, so to convert to rem you can do something like

var remBase = parseInt(window.getComputedStyle(document.body).getPropertyValue('font-size'), 10);
var remValue = (myComputedPixelValue / remBase) + "rem";

Doing VW is similar using the answer in Get the browser viewport dimensions with JavaScript for cross-browser window dimensions, you'd end up with something that looks like

var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var vwValue = (myComputedPixelValue / viewportWidth) + "vw";

Percentages are trickier, because you'd need to compute it based on the parent of the element you're applying the css value to, but the general idea follows the same principle.

Zara