Internet Explorer，jQuery：輸入框跳轉/移動時被替換爲完全相同的

我想要什麼：要在焦點上通過hide（）和show（）將一個輸入框更改爲另一個輸入框。Internet Explorer，jQuery：輸入框跳轉/移動時被替換爲完全相同的

我得到的結果：在Internet Explorer（7/8）中，輸入框在聚焦時向右移動幾個像素。

適用於其他瀏覽器（顯然）。

下面是我已經重新創建的問題，其中一個鏈接：由於不再beeing相關>

源可用上面鏈接的文件中

<鏈接刪除，但爲了您的方便，我會在這裏包括它。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 
<meta http-equiv="Content-language" content="en"/> 
<script src="includes/jquery-1.4.2.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#index_login_dummy").focus(function(){ 
     $(this).hide(); 
     $('#index_login_dummy2').show().focus(); 
    }); 
}); 
</script> 
<style type="text/css"> 
.input_h {display:none;} 
</style> 
</head> 

<body> 

<div id="index_login"> 
    <form method="post" name="index_login" action="login.php"> 
    <input id="index_login_email" type="text" value="Email" name="email"> 
    <input id="index_login_dummy" type="text" value="Password" name="dummy"> 
    <input id="index_login_dummy2" type="text" class="input_h" value="Password" name="dummy"><input type="submit" class="input_button" value="Login"> 
    </form> 
</div> 

</body> 
</html>

+1對於一個制定良好的問題！ ;）

編輯：

當我把表單字段到它按預期工作表。我想有時你必須像解決這些問題一樣解決問題，但我不知道爲什麼。不過，對於不同的瀏覽器以不同的方式繪製表單輸入元素（以及IE中的輸入按鈕影響其餘元素），我還是很好的。

工作代碼：

<div id="index_login"> 
    <form method="post" name="index_login" action="login.php"> 
    <table> 
     <tr> 
      <td><input id="index_login_email" type="text" value="Email" name="email"></td> 
      <td><input id="index_login_dummy" type="text" value="Password" name="dummy"><input id="index_login_dummy2" type="text" class="input_h" value="Password2" name="dummy"></td> 
      <td><input type="submit" class="input_button" value="Login"></td> 
     </tr> 
    </table> 
    </form> 
</div>

來源

2010-08-03 Mattis

我覺得這裏的問題是，有「index_login_dummy2之間沒有間隔「文本框和提交按鈕。如果您將.input_h樣式更改爲display:inline;，則應該會看到該問題。

一種解決方法是在「index_login_dummy2」框的右側應用邊距。

.input_h { display:none; margin-right: 4px; }

應該做的伎倆。

來源

2010-08-03 13:56:50 Mutt

謝謝，您可能正確的問題是隱藏的輸入附加在提交按鈕附近。但是，爲它設置保證金對我來說不起作用。 – Mattis 2010-08-03 14:02:18

邊距右邊確實會對輸入按鈕進行分類。但是，電子郵件和密碼輸入字段之間的空間仍然會移開。保證金的權利也使它在其他瀏覽器中移動另一個方向... :) – Mattis 2010-08-03 15:24:13

我認爲你的答案是最正確的，這個問題肯定依賴於瀏覽器如何解釋表單輸入。我把它們放在一張桌子上（在問題中輸入代碼），一切都很好。謝謝！ – Mattis 2010-08-03 15:35:01

把跨度以防萬一，我嘗試過了，它似乎工作

<span>  
<input id="index_login_email" type="text" value="Email" name="email"> 
<input id="index_login_dummy" type="text" value="Password" name="dummy"></span>

來源

2010-08-03 13:54:20

嗯，不適用於我。無論我在哪裏開始和/或結束span標籤。 – Mattis 2010-08-03 14:20:02

我有這個跳躍問題（在屏幕上向左或向右移動px）在IE9上輸入和選擇元素。我首先想到它是由：focus僞選擇器引起的。這似乎不是原因。當我將css規則從display: inline-block更改爲display:block跳轉元素問題已解決

來源

2015-06-10 11:02:09 pepweb

Internet Explorer，jQuery：輸入框跳轉/移動時被替換爲完全相同的

回答

相關問題