Delete initial text of a field on click

Question

1.00/5 (2 votes)

See more:

Hi, from this page (saved, the original is protected) I run this script with a Chrome extension, which extracts, in "Nome" field, the publisher from the bibliographic description above (Feltrinelli, in the example ). In various cases I need to cancel the self-extracted value. Is there a way to clear this initial value at the first click on any area of the page (except clicking on "Ricerca" button), but then whatever I typed remains until the form is submitted? Thanks very much!

What I have tried:

HTML

<input type="text" onfocus="this.value=''" value="Blabla">

Posted 24-Apr-23 23:30pm

Parvares

Updated 2-May-23 2:43am

v6

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bohdan Stupak · Answer 1 · 2023-04-25T03:43:00

Solution 1

The first thing is you define a global variable that checks whether the click has occured

let isFirstClick = true

Then you create handler, that checks if no clicks have occured then find input by id and clear it's value.

const modifyText = () => {
	if (isFirstClick) {
		const ds = document.getElementById("ds")
		ds.value = ""
		isFirstClick = false
	}	
}

Then attach click to the document

document.addEventListener("click", modifyText)

When your script is exiting destroyed don't forget to remove the listener

document.removeEventListener("click", modifyText)

Posted 25-Apr-23 3:43am

Bohdan Stupak

Comments

Parvares 25-Apr-23 14:51pm

I tried to add this script at the bottom, but "Nome" field now remains empty...

let isFirstClick = true
const modifyText = () => {
	if (isFirstClick) {
		const ds = document.getElementById("ds")
		ds.value = ""
		isFirstClick = false
document.removeEventListener("click", modifyText)
	}	
}
document.addEventListener("click", modifyText)

Richard Deeming 2-May-23 8:33am

Rather than using a global flag, surely it would be better to use the once parameter of the addEventListener options?
EventTarget: addEventListener() method - Web APIs | MDN[^]

"once: A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked. If not specified, defaults to false."

Parvares 2-May-23 8:41am

Thanks, Richard Deeming, I solved changing click event with selectionchange.