1

I've been recently creating a website that can store any variable whenever the user type in input box. As you can see the code below i used it for creating my website. 

function myFunction() {
    var x = document.getElementById("myText").value;
    document.getElementById("demo").innerHTML = x;
    document.getElementById("myText2").value = x;
}
First Name: <input type="text" id="myText" value="   Mickey">
</br>
</br>
Copy Name: <input type="text" id="myText2">
<p>Click the button to display the value of the value attribute of the text field.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

Although the code works as I want, I suddenly found the bug. Here's the bug, when I type a space several times in input box, why the outcome is different when it stored to the demo paragraph but it has a same result with another input box ? The space does counted in another input box but not in demo paragraph. And how to make the total space in input box is same with paragraph.innerHTML when it stored ?

marfin fadilah
  • 13
  • 2
  • Spaces are generally not significant in HTML code (except things like `inline-block` and `
    `).
     – gcampbell Jul 19 '16 at 11:24
  • Possible duplicate of [Javascript Removing Whitespace When It Shouldn't?](http://stackoverflow.com/questions/213845/javascript-removing-whitespace-when-it-shouldnt) – emerson.marini Jul 19 '16 at 11:25
  • I tried using space between two words, but i got as expected – Ray Jul 19 '16 at 11:25
  • Please inspect the element of demo after appending some space, you will see the space has included – Ray Jul 19 '16 at 11:31
  • But dom element will not recognize – Ray Jul 19 '16 at 11:33
  • @Claies I tried that but it seems doesn't work, still the same. – marfin fadilah Jul 19 '16 at 11:33
  • the HTML DOM is space insensitive, it does not, and cannot, be formatted by adding spaces. the extra spaces are present in the data but they will never be rendered by the browser. – Claies Jul 19 '16 at 11:35
  • @Ray What if you press space more than twice, will you get as you expected ? For me, no. – marfin fadilah Jul 19 '16 at 11:35
  • @marfinfadilah, even i can reproduce that, but i inspected the element of appended text I could see the space , but when it display it's ignoring space. – Ray Jul 19 '16 at 11:38
  • @Claies Well, it would work in textarea but not in input box. So, do you mean there is no solution for this one ? @@ – marfin fadilah Jul 19 '16 at 11:38
  • @Ray Yeah, that's the issue here. When it display, why it's ignoring the space in innerHTML ? – marfin fadilah Jul 19 '16 at 11:41
  • what you are describing as a bug is not a bug. spaces are not formatting characters, and you should never try to use them for formatting; not in HTML, not in Word Documents, not in Spreadsheets, never. that isn't what spaces are for. – Claies Jul 19 '16 at 11:44
  • @Claies If it seems impossible to be formatted, then at least tell me how to count how many space I type in input box ? Is it still possible ? Actually I still could outsmart it with ASCII user input but it is too complicated. – marfin fadilah Jul 19 '16 at 11:56
  • count how many spaces where? between words? at the beginning of the words? at the end of the words? the total number of spaces everywhere in the string? "count how many space" is way too broad, besides being an entirely different question, and it's not obvious how it would help you here anyway. If you can't wrap the text in `
    `, then you should ignore the extra spaces, just as the browser does.  trying to build logic around spaces doesn't make sense.
     – Claies Jul 19 '16 at 12:01
  • @Claies Wtf ?? my question has been solved with just a sentence "white-space: pre;". That's it !!. And about where the spaces would be counted, I want it in everywhere the user type a space in inputbox. Why it so hard to be understanding ? And it does make sense because we can use event.keykode to count how many times you press space in HTML which my browser supported it. And I think it is not an entirely different question because I refer to the total spaces that user press it. – marfin fadilah Jul 19 '16 at 12:33

1 Answers1

2

Wrap your HTML code in <span class="data"> tags and add the following CSS,

span.data { white-space: pre; }

Duplicate:

HTML/CSS - Best practice for preserving white space on certain elements?

Community
  • 1
  • 1
Dennis
  • 3,962
  • 7
  • 26
  • 44
  • It works perfectly, sir !!. How can I express my gratitude to you ? I am still noob in here. I don't even know how to mark this question has been solved by you. I am deeply apologize for being a burden to you but I gotta ask you a question again. Is there anything I can do for you at least ?. This answer is an expensive one for me !!. – marfin fadilah Jul 19 '16 at 12:19
  • No problem at all. :) – Dennis Jul 19 '16 at 12:43