Trying to add a "ghost" text in a input form with javascript

Question

I found something i like on Tumbler and tried to recreate it.. but i have a problem.

this is what im trying to clone: http://cl.vc/Beta/Tumbler/

and this is what i have: http://cl.vc/Beta/Tumbler/test.html

HTML:

<form method="post" name="form" id="form"> 
<span id="myText"><p hidden>good</p></span> 
<input type="text" id="input" name="input" value="" onkeypress="showtext();"/>

JavaScript:

function showtext() {
    var inputlength = document.getElementById('input').value.length;
    var string = "";

    for (var i = 0; i <= inputlength; i++) {
        var string = string + "&nbsp;";
    }

    document.getElementById('myText').innerHTML = string + "cl.vc";
    document.getElementById('myText').style.zIndex = "2";
}

the problem is that the space is not the same as if you type in hhhhh or iiiiii because the size of the letter is different.. i also would like if to take away the space if you delete the text..

http://cl.vc/Beta/Tumbler/jstester.html this does not seem to be working like i want it to... im using clientWidth(); but its not working right... what am i doing wrong? — user633268, Mar 16 '11 at 12:00
I'm interested in a jQuery plugin that replicates the functionality of the first link (but instead of a suffix, I want to have a prefix). Have you found anything? — AlfaTeK, Mar 30 '11 at 22:27

score 1 · Answer 1 · edited May 23 '17 at 09:58

1

Put the text in another div and measure the width, using the answer here: Determine Pixel Length of String in Javascript/jQuery?

Then, set your suffix to start at the offset you determined from the width

edited May 23 '17 at 09:58

Community

1
1

answered Mar 14 '11 at 19:29

jnpdx

45,847
6
64
94

i tried this but its not working correctly.. http://cl.vc/Beta/Tumbler/jstester.html .. To much code for this box.. – user633268 Mar 14 '11 at 23:13
What isn't working correctly? You have a good start to it, now you just need to add margins, take into account for when characters are deleted, etc – jnpdx Mar 15 '11 at 01:09

score 0 · Answer 2 · answered Mar 14 '11 at 19:27

Create a DIV styled with the following styles. In your JavaScript, set the font size and attributes that you are trying to measure, put your string in the DIV, then read the current width and height of the DIV. It will stretch to fit the contents and the size will be within a few pixels of the string rendered size.

HTML:

<div id="Test">
    abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

CSS:

#Test
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
}

JavaScript (fragment):

var test = document.getElementById("Test");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px";

Trying to add a "ghost" text in a input form with javascript

2 Answers2