1

there's a weird thing happening when I have an input field selected and I click a button to change the placeholder / onblur holder. When I'm looking at the F12 tools in the browser a new HTML source document is created which only contains the previously selected placeholder after clicking on a button to change the placeholder.

ie. if I select input field "First Name" and I my current language selection is English, after clicking a button which changes the onblur placeholder to Italian, the HTML document only contains the English first name set in the onblur function and nothing else (no HTML, no body, nothing...).

Why and how is this happening? How can I prevent this from happening.

You can reproduce the problem with this code.

1.) open the F12 tools

2.) select any input field

3.) click on any of the buttons

let fname = document.getElementById("fname"); let lname = document.getElementById("lname"); let email = document.getElementById("email"); const placeholders = {	sl: { fname: "Janez", lname: "Novak", email: "[email protected]" },	en: { fname: "John", lname: "Doe", email: "[email protected]" },	de: { fname: "Kommissar", lname: "Rex", email: "[email protected]" },	it: { fname: "Julius", lname: "Cezar", email: "[email protected]"},	hr: { fname: "Mirko", lname: "Mirkic", email: "[email protected]"},	ru: { fname: "Joseph", lname: "Lenin", email: "[email protected]"} }; const blurholders = {	sl: { fname: "Janez", lname: "Novak", email: "[email protected]" },	en: { fname: "John", lname: "Doe", email: "[email protected]" },	de: { fname: "Kommissar", lname: "Rex", email: "[email protected]" },	it: { fname: "Julius", lname: "Cezar", email: "[email protected]"},	hr: { fname: "Mirko", lname: "Mirkic", email: "[email protected]"},	ru: { fname: "Joseph", lname: "Lenin", email: "[email protected]"} }; function setInputs(language) { if (Object.keys(placeholders).includes(language)){ const values = placeholders[language]; fname.setAttribute("placeholder", values.fname); lname.setAttribute("placeholder", values.lname); email.setAttribute("placeholder", values.email); } } function setOnBlurs(language) {	if(Object.keys(blurholders).includes(language)){	const valuesB = blurholders[language]; fname.setAttribute("onblur", valuesB.fname); lname.setAttribute("onblur", valuesB.lname); email.setAttribute("onblur", valuesB.email);	} }
<input type="text" name="fname" id="fname" required maxlength="50" minlength="1" placeholder="Janez"	onfocus="this.placeholder = ''" onblur="this.placeholder = 'Janez'" /><br />	<input type="text" name="lname" id="lname" required maxlength="50" minlength="1" placeholder="Novak"	onfocus="this.placeholder = ''" onblur="this.placeholder = 'Novak'" /><br />	<input type="email" name="email" id="email" autofocus="autofocus" required placeholder="[email protected]"	onfocus="this.placeholder = ''" onblur="this.placeholder = '[email protected]'" />	<br />	<input type="button" value="setInputs SI" onclick="setInputs('sl'); setOnBlurs('sl');">	<input type="button" value="setInputs EN" onclick="setInputs('en'); setOnBlurs('en');">	<input type="button" value="setInputs DE" onclick="setInputs('de'); setOnBlurs('de');">	<input type="button" value="setInputs IT" onclick="setInputs('it'); setOnBlurs('it');">	<input type="button" value="setInputs HR" onclick="setInputs('hr'); setOnBlurs('hr');">	<input type="button" value="setInputs RU" onclick="setInputs('ru'); setOnBlurs('ru');">

Improve this question
2
  • 1
    question 1: What do you mean by "select any input field"? question 2: What browser are you using? I was unable to reproduce the issue using chrome Commented Jan 24, 2020 at 9:02
  • 1. select either firstname, lastname or email (click inside the field as if you were going to type in your name/lastname/email). 2. I'm also using chrome. Commented Jan 24, 2020 at 9:17

1 Answer 1

Reset to default
2

Even though I was unable to reproduce your Developer Tools issue, there is an error in your code that might cause you some confusion.

The onblur attribute, unlike placeholder, can only contain function names and not literal strings.

onblur="Janez" throws an error because the browser is looking for a function called Janez

You don't need to be resetting the value of the placeholder. If the field is empty when it blurs, the placeholder will be shown again.

The following attributes should be enough for your inputs.

<input type="text" name="fname" id="fname" required="" maxlength="50" minlength="1" placeholder="Janez">

As far as the buttons are concerned, I think that setOnBlurs is pointless

<input type="button" value="setInputs SI" onclick="setInputs('sl')">

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thank you for the explenation. Didn't know that. How would I change the onblur value then? if a person changes the language (clicks the button) to English, I would like onblur value to change to ie. John (currently if a person clicks on the field, writes nothing in it and clicks somewhere else reverts back to the default Janez)
@DrDoom - As I wrote in my answer, if a field is empty when it loses focus, then the placeholder should suffice. So just keep changing the placeholders when the language changes and you should be fine.
Thats actually not true. If you look at the code, onblur value is hardcoded to ie. Janez, Novak. Once a user clicks outside the field (and the field remains empty) the value will change back to ie. Janez as onblur is set to that.
@DrDoom - Nope, that's because of the placeholder attribute. The onblur attribute is an HTML hard-coded event handler that cannot contain strings. Just like onclick. Check this article out: w3schools.com/jsref/event_onblur.asp
Just to clarify. You're saying that the value of onblur can not be changed using JS?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.