Input Value on Keypress - Copy to Text Value adjacent

Ask the community
,
1

Hi,

I’m creating a ‘create a post’ light box.

There is two sections on the light box:

On the left: Are the Input fields


On the right: Is the text which will show what the post will look like once posted


I’m wanting what is typed in the Input fields to show (as you type) on the right (the final post).

I can’t just use the onKeypress as it doesn’t track the letters properly (it tracks one letter behind).

This is what I have so far, but as mentioned it tracks a letter behind.

export function input6_keyPress(event, $w) {
	
	let text = $w('#input6').value; 
	$w("#text302").text = text;
	 
}

Many thanks

Thomas

2

Just giving this a nudge again!

3

Hi Thomas,
You need to add a small delay,
Check this out:

export function input6_keyPress(event, $w) { 
    setTimeout(() => {
        let text = event.target.value; // equals to $w('#input6').value in this case. 
         $w("#text302").text = text; 
    }, 10);
}

For more information:
https://developer.mozilla.org/ro/docs/Web/API/window.setTimeout
Good luck!
Roi

4

Hi Roi

Many thanks!

It doesn’t track properly in preview mode for some reason, but once published all is perfect.

Thanks again!

Thomas

5

Glad it worked out!
Roi

6

Hi Roi

I’ve hit a bit of a snag with the ‘datePicker’ part of the copy across.

I’ve tried:

export function datePicker1_change(event, $w) {
    setTimeout(() => {
    let text = $w('#datePicker1').value;  
         $w("#text1").text = text; 
    }, 10); 
}

export function datePicker1_click(event, $w) {
    setTimeout(() => {
    let text = $w('#datePicker1').value;  
         $w("#text1").text = text; 
    }, 10); 
}

I even tried is as part of an onclick with a separate button:

export function button1_click(event, $w) {
let date1 = $w("#datePicker1").value;
$w("#text1").text = date1;
}

but none have worked and I’m not sure why?

Tom

7

Hi Tom,
$w(" #datePicker1 “).value is an object and $w(” #text1 ").text is expecting a string.
You can use toDateString() method;.

const date1 = $w('#datepicker1').value;
$w('text1').text = date1.toDateString();

For more information:

Good luck!
Roi

8

Works perfectly. Many Thanks, Roi!

Thomas