位置決めはJavaScriptでは機能しません -- javascript フィールド と jquery フィールド と html フィールド と css フィールド 関連 問題

positioning doesn't work with Javascript












2
vote

問題

日本語

私は「オートフィル」機能を構築しています。ユーザが入力フィールドに何かを入力し、システムはデータベース内のこの文字列を見つけたときに、Googleが使用している/存在しているのと同様に、灰色の入力フィールドに文字列を入力フィールドに表示する必要があります。

そのため、2つの入力フィールドを構築しました。

HTML:

<事前> <コード> <input id="email_input" type="text"> <input id="autofill" type="text">

CSS:

<事前> <コード> #email_input{ background-color: transparent; z-index: 100; }

その後、 autofill positionAutoFillInput(); の位置を介して autofill を位置付けます。

<事前> <コード> function positionAutocompleteInput(){ var top = $('#email_input').position().top; var left = $('#email_input').position().left; $('#autofill').css({'top':top}); $('#autofill').css({'left':left}); } positionAutoFillInput();

実際のAutfill私はこのようにしています:

<事前> <コード> function autofill(context){ var input = $('#email_input').val(); var replacement = context[0].email; replacement = replacement.slice(input.length); var display = input + replacement; $('#autofill').val(display) }

positionAutoFillInput(); OnInputを呼び出して、各入力で再配置されるようにしました。コンソール内の両方の入力フィールドの位置を見ると、それらは両方とも同じ位置を持ちます。

両方の入力フィールドには同じフォントサイズとフォントファミリがあります。

何らかの理由でそれはまだ外れます:

イメージの説明を入力します。ここで

誰も答えを知っていますか?

英語

I am building an "autofill" function. When the user types something in an input field and the system finds this string in the database it should display the string into the input field in grey, similar to what google used to/still have/has.

Therefore I built two input fields, one that's clearly visible:

html:

<input id="email_input" type="text"> <input id="autofill" type="text"> 

css:

#email_input{     background-color: transparent;     z-index: 100; } 

Then I position the autofill input via JS exactly where email_input is.

function positionAutocompleteInput(){   var top = $('#email_input').position().top;   var left = $('#email_input').position().left;   $('#autofill').css({'top':top});   $('#autofill').css({'left':left}); } positionAutoFillInput(); 

The actual autfill I do like this:

function autofill(context){   var input = $('#email_input').val();   var replacement = context[0].email;   replacement = replacement.slice(input.length);   var display = input + replacement;   $('#autofill').val(display) } 

I tried calling positionAutoFillInput(); onInput, so that it gets repositioned with each input. If I look at the positions of both input fields in the console, they both have the same positions.

Both input fields have the same font-size and font-family.

For some reason it still looks off:

enter image description here

Anyone know an answer?

</div
           
     
     

回答リスト

4
 
vote
vote
ベストアンサー
 

このようなCSSでそれらを配置することはできますか?このようにして、それを位置付けるにはJavaScriptを必要としません。

 <コード> #autofill, #email_input {    font-size: 20px;  }    #autofill {    position: absolute;    color: #CCCCCC;  }    #email_input {    position: relative;    z-index: 1;    background: transparent;  }  
 <コード> <h1>Test</h1>  <div>    <input id="autofill" type="text" value="1234567890">    <input id="email_input" type="text">  </div>  
 

Can you just position them with CSS like this? This way it requires no JavaScript to position it.

#autofill, #email_input {    font-size: 20px;  }    #autofill {    position: absolute;    color: #CCCCCC;  }    #email_input {    position: relative;    z-index: 1;    background: transparent;  }
<h1>Test</h1>  <div>    <input id="autofill" type="text" value="1234567890">    <input id="email_input" type="text">  </div>
</div
 
 
 
 

関連する質問

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

5  CSSのテーブルを垂直方向に揃える方法  ( How to vertically align a table in css ) 
画面の途中でテーブルをCSS?に垂直に揃える方法 ...

0  背景イメージFirefox3のぼかし  ( Background image blurs in firefox3 ) 
Backgroundプロパティを使用してHTMLページで画像を使用すると、IEではLOKS FYNSがFirefoxでぼやけます。ワットは可能な解決策かもしれません。 ありがとう、 ...

4  連続文字列はTDで包まれていない  ( Continuous string not getting wrapped in td ) 
固定幅TDに長い連続文字列を置くと、ラップされていません。文字列は私のテーブルの幅を増加させます。誰でも私を助けてください。 例えば: これは私のテキストです - TD幅のようにうまく機能します。 しかし、挿入した場合は ThisISistyText ---...

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...

1  Easy CSSカスタマイズのためのHTMLを設計するためのガイドライン  ( Guidelines for designing html for easy css customization ) 
SaaSプロジェクトをしています、そして、私たちは「彼の」WebサイトのためにCSSページをアップロードできるようにします。 (実際には、すべての顧客のサイトは仮想ホスティングを使用して私たちがホストされています)。 CSSを適用できるように、ページのHT...

76  ハイフンのような特殊文字の後に単語を破る方法( - )  ( How to break word after special character like hyphens ) 
比較的単純なCSS: <コード> div { width: 150px; } <コード> <div> 12333-2333-233-23339392-332332323 </div> 文字列が width に制約される...

0  LazyWeb:要素の訪問されたクラスに基づいてLI要素を削除するJavaScriptが必要  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
すでにクリックしたように、必要なデータがたくさんあるこのページを持っていますが、頻繁に青色を探す必要があるので、頻繁に繰り返されます。私はこれがより効率的かもしれないことに気づいて、それが含まれているリンクが訪問されたかどうかに基づいて要素を隠されたように設定...

303  Internet Explorer 7の絶対に配置された親のパーセント幅の子要素の幅が崩壊したのはなぜですか。  ( Why did the width collapse in the percentage width child element in an absolutel ) 
私は、いくつかの子供を含む絶対に配置された div があり、そのうちの1つは比較的配置された div です。子<コード> Form1 で Form0 を使用すると、IE7の Form2 に折りたたみますが、FirefoxまたはSafariではなく。 For...

8  GeckoベースのブラウザのCSSテーブルセルの境界線を消す  ( Disappearing css table cell borders in gecko based browsers ) 
私はヤモリのバグを明らかにするように思われる非常に具体的なHTMLテーブルの構築物を持っています。 これは問題の蒸留版です。 Geckoベースのブラウザ(たとえば、FFなど)の次の表を守ってください。(これをコピーして新しいファイルに貼り付ける必要があります)...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有