0

Hi, I'm making a website and with a form but firefox keeps displaying unwanted text in the input fields when its value is empty. This happens when using email or tel in the input method.

        <form action='locatie.php?root=<?php echo $root; ?>' target='_self' method='post' onSubmit='return checkForm()' >
<table style='width:725px;' id='text' border='1'>
  <tr>
    <td colspan='7'></td>
  </tr>
  <tr>
    <td colspan='7' ><hr /></td>
  </tr>
  <tr>
    <td style='width:100px;' ><label for='locatie' >Locatie naam: </label></td>
    <td style='width:140px;' ><input type='text' name='locatie' id='locatie' value='' placeholder='locatie naam' maxlength='20' size='20' /></td>
    <td style='width:8 0px;' ><label for='adres' >Adres: </label></td>
    <td colspan='4'><input type='text' name='adres' id='adres' value='' placeholder='Adres locatie' maxlength='30' size='30'/></td>
  </tr>
  <tr>
    <td><label for='beheer' >Beheerder: </label></td>
    <td ><input type='text' name='beheer' id='beheer' value='' placeholder='Beheerder naam' maxlength='21' size='20' /></td>
    <td><label for='tel' >Tel nr: </label></td>
    <td style='width:140;' ><input type='text' name='tel' id='tel' value='' maxlength='13' size='12' /></td>
    <td style='width:80px;' >Email:</td>
    <td colspan='2'><input type='text' name='email' id='email' value=' ' placeholder='Email beheer' maxlength='31' size='20' /></td>
  </tr>
  <tr>
    <td style='vertical-align:top;' ><label for='route' >Route beschrijving: </label></td>
    <td style='vertical-align:top;' colspan='6'><textarea name='route' id='route' value='' placeholder='Google maps link met route' cols='75' rows='10' ></textarea></td>
  </tr>
  <tr>
    <td colspan='7'>&nbsp;</td>
  </tr>
  <tr>
    <td ><label for='ondergrond' >Ondergrond: </label></td>
    <td ><select name='ondergrond' id='ondergrond' >
                <option value='Veld' >Veld</option>
          <option value='Zaal' >Zaal</option>
          <option value='Kunstgras' >Kunstgras</option>
         </select>
     </td>
    <td><label for='seizoen' >Seizoen: </label></td>
    <td><select name='seizoen' id='seizoen' >
                <option value='Veld' >Veld</option>
          <option value='Zaal' >Zaal</option>
         </select>
    </td>
    <td colspan='3'></td>
  </tr>
  <tr>
    <td colspan='7'><input type='submit' name='action' id='action' value='Opslaan' /></td>
  </tr>
  <tr>
    <td colspan='7'><hr /></td>
  </tr>
</table>
</form>

In firefox, the input field will contain the text "Enter your phone number here" or "Enter your email here" which I dont want . Is there any way to prevent firefox from doing this except for adding content to the input?

If added the whole form, the rest of the page contains a lot of php that just saves the form to a database.

Tiago Farias
  • 3,397
  • 1
  • 27
  • 30
Maurits
  • 1
  • 1
  • 2

4 Answers4

2

You're setting the placeholder attribute on the <input> field, whose purpose it is to show something as long as no data is entered.

Just remove that attribute and you'll be fine.

Citing from MDN:

placeholder

A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.

Sirko
  • 72,589
  • 19
  • 149
  • 183
  • This sounds logical, but his `placeholder` doesn't contain the text "Enter your phone number here"; instead it contains " nr beheer". – feeela Jul 19 '12 at 13:18
  • @feeela From the code given it's the only source of text inside the input field. The string in `placeholder` actually looks kind of messed up, so I assumed it's not the original text. – Sirko Jul 19 '12 at 13:20
  • @Maurits Based on that information I assume that there **must** exist some sort of value. Maybe the value is set by some JavaScript – but for sure not through Firefox itself. – feeela Jul 19 '12 at 13:28
  • if opend the side in Chrome and IE also but there it doesn't happen. i also check the Javascript i'm using but nothing there either. – Maurits Jul 19 '12 at 13:33
  • @Maurits can you put up a fiddle containing more code (the whole site) so we can have a look at more of the code? – Sirko Jul 19 '12 at 13:54
1

The Placeholder is the problem but the solution is not to remove it. Use autocomplete="off" inside the input tag.

user3341390
  • 11
  • 1
  • Autocomplete allows the browser to supply a value based on past entries if the browser is configured to do so. It doesn't affect the behavior that is being asked about this this question. – Jason Aller Feb 22 '14 at 18:32
0

Clear your cookies, saved form data and browser cache. Also disable JS to see if this is the culprit.

You might also want to remove the placeholder="" attribute if you're not using it anyway.

I strongly recommend you download the "web developer toolbar" by Chris Pederick, because clearing all of this from your browser and disabling JS / CSS etc is as easy as the click of a button. Available for both Firefox and Chrome.

http://chrispederick.com/work/web-developer/

Good luck, Michael.

Michael Giovanni Pumo
  • 14,338
  • 18
  • 91
  • 140
  • Thx for the advise i already have the plugin and tried it. didn't solve the problem i think I'll just make a javascript that checks the form for those 2 lines and removes them. leaving a clean input field. – Maurits Jul 19 '12 at 15:23
0

Posting this here because this is the SO issue I found and, while it may not apply to OP's situation it did help me.

Firefox (and similarly Safari) has a bug where non-numeric characters are rendered in the input field although the value of the input remains empty.

To work around this I check the browser being used via this answer - https://stackoverflow.com/a/26358856/6410635 - and then set the element type to "text" instead of "number" and then adding a pattern attribute of "\d*" to the input.

<input
  type={safari || firefox ? "text" : "number"}
  pattern="\d*"
  ...
/>

Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1398528

dcordz
  • 160
  • 3
  • 8