带有jQuery的html5占位符-javascript输入值请参见占位符

Question

I have a page that another part of our team uses jquery for some functions. When the jquery* files are called my javascript validation see the HTML5 Placeholders as value. If I take out the jquery everthign works fine.

For example if I have this:

!document.getElementById("company").value

With the jquery in the html file either in the header or in the body my JS does not see this as null or empty it see is with a value of the HTML5 Placeholder.

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.main.js"></script>

Thank you for any help you can give.

Answer 1

If I understood you correctly, you have a form with a placeholder attribute which works fine. In your code, using vanilla javascript, you're reading out the value attribute of fields of that form and it normally returns an empty string if that field is empty. But now, upon including jQuery, asking for the value attribute returns the placeholder text instead.

It sounds like a bug to me. Are you by any chance using IE? This is not a solution, but a work around. What you can do is compare the value you get to the placeholder text. If it's equal, then you conclude that the field is still empty:

<input name="company" type="text" id="company" onFocus="changebrc('Company');" placeholder="Company Name"/>

if (document.getElementById("company").value == "Company Name"){/*field is empty*/}

This will not work if the user decides to enter the same text written in the placeholder, which is quite unlikely if proper placeholder text is used.