HTML表单输入窃取焦点/焦点被移动

时间:2013-04-15 09:06:22

标签: html

出于某种原因,焦点不断从我的HTML表单上的任何地址字段转移到信用卡字段。

因此点击地址字段,焦点会回到信用卡字段。

这可能非常简单,但任何人都可以帮忙吗?

http://jsfiddle.net/xYbsz/

<form name='order-validation'>
<p><label>email: <input type="email" title="email" id="emailAddress" name="email"   value=""></label></p>

<p>
Phone: <select name="countrycode" style="display: inline;">
<option value="44" selected>UK (+44)</option> 
<option value="1">USA (+1)</option> 
<option value="213">Algeria (+213)</option> 
</select><input type="tel" name="phone" id="id_tel" required pattern="(\+?\d[-.]*){7,13}" title="international, national or local phone number"/></p>
<img class="cc-img" id="visa-card-img" src="visa.jpg" />
<img class="cc-img" id="mastercard-card-img" src="mastercard.jpg" />
<img class="cc-img" id="amex-card-img"src="american-express.jpg" />
<p><label>credit card: <input type="text" id="cc_number" pattern="[0-9]{13,16}"><br />
<img class="cc-security-code" id="visa-sec-code" src="cvv.gif" />

<img class="cc-security-code" id="amex-sec-code" style="display: none;" src="amex-sec-code.gif" /><br />
Address:
<input type="text" name="newCreditCardStreet" size="35" tabindex="5" value="" id="id_creditCardStreet"><br />
Town/City:
<input type="text" name="newCreditCardLocality" size="35" tabindex="5" value="" id="id_creditCardLocality"><br />
Country:
<input type="text" name="country" id="id_country">
<p><input type="button" name="submit" value="Submit" /></p>
<p id="test"></p>
</form>

1 个答案:

答案 0 :(得分:3)

cc_number的标签标签未关闭。

  <label for="cc_number">credit card:</label> 
  <input type="text" id="cc_number" pattern="[0-9]{13,16}"><br />

此外,我注意到标记中的标签标签正在包装输入。这是不必要的:

<label>email: 
    <input type="email" title="email" id="emailAddress" name="email"   value="">
</label>

而是使用for属性:

<label for="emailAddress">email:</label>
<input type="email" title="email" id="emailAddress" name="email"   value="">

工作示例 http://jsfiddle.net/xYbsz/1/