タグ付けされた質問 「html」

HTML(HyperText Markup Language)は、Webブラウザーに表示されるWebページやその他の情報を作成するための主要なマークアップ言語です。HTMLに関する質問には、最小限の再現可能な例と、何を達成しようとしているのかについての考えを含める必要があります。このタグが単独で使用されることはほとんどなく、[CSS]や[javascript]と組み合わせられることがよくあります。

2
iframeでwindow.location.replaceを使用できますか?
履歴window.location.replaceを回避し、ページをリロードせずにページ上のアンカーをターゲットにするために使用できますが、iframeではできませんか? 問題は、CSP(コンテンツセキュリティポリシー)違反、状態をscript-src 'unsafe-inline'有効にする必要があります。CSPを定義していない場合を除いて、CSPを定義して許可しscript-src 'unsafe-inline'ても、同じ違反エラーが発生します。ie11 / chrome / ffでも同じ結果になります。 同じドメイン(同じディレクトリ内)の iframe 。 コンソールでiframeをターゲットにして、コンソールで使用window.location.replace('/samepage.html#onpage_anchor')します。 できます。 これは、ページをリロードすることなく、履歴なしでページ上のアンカーをターゲットにします。 同じコードをアンカーリンクにインラインで配置すると機能します。 外部スクリプトで同じコードを使用すると、csp違反エラーが発生します。 これは、iframe内でなくても正常に機能します。 私は、CSPを作成しようとしたアクションを許可しますが、いなくても、最も寛容なコンテンツセキュリティポリシー可能性は、それを可能にします。 編集:複数のファイルを許可する例をプランカーにまとめて、親/子ページを参照する適切なhrefを使用できるようにします。 プランカーの例に関するメモ: 問題はこれらの例では再現されません。 スクリプトは、iframeでも完全に機能します。ただし、同じコードがローカルサーバーで機能しないか、VPSでライブ実行すると機能しません。 プランカーはある種の抽象化レイヤーを介してブラウザーにコンテンツを提示しているため、CSP違反はプランカーでトリガーされないのではないかと思います。 親のアコーディオンリンクを初めてクリックすると、更新されます。これは、ページが最初にロードされる方法がindex.htmlを参照しないためです。以降のクリックは、ページをリロードしなくても期待どおりに機能します。最初はchild.htmlを参照するため、iframeの問題ではありません これらは、コードを機能させるために変更を必要とせずにコードを表示するのに適した例です(下記のStackoverflowスニペットで機能させるためにhrefを変更する必要がある場合など)。また、javascriptが正常に機能していることも示しています。しかし、それは実際の問題を示していません。実際の問題を確認するには、エディターにロードしてローカルサーバーまたはライブホスティング環境で実行する必要があります。 プランカーの例 スクリプトあり: 履歴 なしスクリプトなし: 履歴あり 簡略化されたコード例 1つのエントリを持つ単純なアコーディオン。問題を再現するのに十分です。 開く/閉じるをクリックすると、アコーディオンが展開/折りたたまれます。JSは必要ありません。JSはまったく同じことを行いますが、履歴はありません。正常に機能しますが、iframeでは機能しません。 コードスニペットのメモ: スニペットを実行して、私が説明していることについてのアイデアを得ることができますが、実際には問題を示していません。 スニペットは実際のブラウザのように動作せず、JavaScriptは機能しません。 スニペットはコードを示していますが、問題を確認するにはiframeで実行する必要があります。iframeの外で実行して、違いとその動作を確認します。 リンクがJSでどのように機能するか(URL全体を置き換える)のため、スニペットに表示されるのと同じようにリンクするのではなく、 実際にはこのようにする必要があります(スニペットの実際のHTMLページをターゲットにすることはできません)。あなたがあれば、あなたのエディタでこれを試してください(行ってください)、その後、することを忘れないでください、この形式へのリンクを変更し、彼らはまだあるので、同じページのアンカー、しかしpage.htmlがリンクに含まれています。href="https://stackoverflow.com/thispage.html#ac1"href="#ac1" this_document.html#anchor コードスニペットを表示 $(document).ready(function() { // anchor links without history $.acAnch = …

6
Next.js /から別のページへのリダイレクト
私は中に新たなんだNext.jsと私は、スタートページ(からリダイレクトする方法を思ったんだけど/へ)/ハローnextjs例えば。ユーザーがページをロードした後、パス=== / / hello-nextjsにリダイレクトするかどうかを決定します で反応し、ルータ、我々は次のように実行します。 <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} /> </Switch>

3
文字﷼は数字の前に貼り付けることはできません
﷼数字の前に文字(リヤル通貨)を貼り付けることができません。 1﷼ 2つの数字の間に貼り付けることもできません。最後に貼り付けます。 11﷼ 手紙の前に貼り付けても問題ありません。 ﷼a 誰かが何が起こり、どうすればそれができるのか知っていますか?
14 html 

4
アスペクト比を想定せずにiframeを応答させる方法は?
アスペクト比を想定せずにiframeをレスポンシブにする方法は?たとえば、コンテンツには幅や高さがあり、レンダリング前は不明です。 JavaScriptを使用できることに注意してください。 例: <div id="iframe-container"> <iframe/> </div> iframe-container余計なスペースがなくてもコンテンツがかろうじて収まるようにサイズを調整します。つまり、コンテンツを表示するのに十分なスペースがあり、スクロールせずに表示できますが、余分なスペースはありません。コンテナはiframeを完全にラップします。 これは、コンテンツのアスペクト比が16:9であると想定して、iframeをレスポンシブにする方法を示しています。しかし、この質問では、アスペクト比は可変です。

8
テキストボックスに最後の数字を入力すると最初の数字が入ります
最後の数字を入力すると、最初の数字が内部に入りtext-box(消えます)、スペースが1つ追加されます。 外側をクリックした後、text-box最後の文字を入力するときに必要な見栄えが良くなります。 #number_text { padding-left: 9px; letter-spacing: 31px; border: 0; background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%); background-position: left bottom; background-size: 38px 1px; background-repeat: repeat-x; width: 220px; box-sizing: border-box; outline:none; } <input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234" > コードスニペットを実行する結果を非表示スニペットを展開 この問題から抜け出すのを手伝ってください。ありがとう
14 javascript  jquery  html  css 

9
キャッシュが無効になっているにもかかわらず、サーバーがコードファイルの変更を無視するのはなぜですか?
ローカルホスト(Windows 7、Chrome v79.0.3945.130(64ビット))でhtml / jsコードをテストしましたが、コード変更の約50%がブラウザーに反映されていません(開発ツール/ソースで確認しました) )。 インターネットにはたくさんのアドバイスがありますが、どちらもうまくいかないようです: リロードを右クリックして、「キャッシュを空にしてハードリロード」を選択します-30%の場合は役に立ちません。 Chrome開発ツールの[ネットワーク]タブでキャッシュを無効にする-役に立ちません。 <meta http-equiv="Cache-control" content="no-cache">ヘッダーに追加-助けにはなりません。 交換する<script src="common.js"></script>ことにより、<script src="common.js?blabla"></script>-例60%に役立ちますが、すべての変更は、巨大な雑用になった後、あなたはそれを行う必要があります。また、htmlの変更には対応していません。 ファイルを新しいファイル(index.htmlからindex2.htmlなど)にコピーし、コード内のファイル名を置き換えます-常に機能しますが、さらに面倒です。 コードをgithub.ioにコミットするときに発生するまったく同じ問題 サイトにコードの変更がすぐに反映されるようにしてください。 編集:index3.htmlファイルを作成し、「hello world」のみを配置しました。ブラウザでファイルを開きました。「hello world2」に変更-ブラウザがコンテンツを更新しました。「hello world3」に変更-複数の再ロードと「キャッシュとハードの再ロードを空にする」後でも、ブラウザはまだ「hello world2」を表示していました。私は「hello world4」に変更しました-ブラウザはまだ「hello world2」を示していました。4時間後、私は「hello world5」に変更しました-ブラウザーにはまだ「hello world2」が表示されています。このファイルは、基本的なメモ帳で編集しました。 Edit2:人々は私が使用しているサーバーを尋ね続けます。これは問題の一部のようです。残念ながら、私はそれを確認するために私が正確に何をする必要があるのか​​わかりません。ここに私がこれまでに見つけたすべてがあります: 私が持っているinetpub/wwwroot私は、HTML&JSファイルを配置し、で、ブラウザでindex.htmlを開きディレクトリをhttp://localhost/。 Devs Toolsの[マイネットワーク]パネルは次のようになります:画像リンク。 サーバーのセットアップは非常に高速で、追加のソフトウェアをインストールする必要はありませんでした。つまり、node.jsを使用していません。 にiisstart.htmがinetpub/wwwrootあり、開くhttp://localhost/iisstart.htmとIIS7と表示されます。

5
JSファイルでHTMLをHTML文字列に変換する
JSを介してHTMLを作成したいので、次のようにJSファイル内にHTMLを書き込む必要があります。 function createHtmlSection() { return "<li class=\"chapter up-wrapper-btn\">" + "<div>" + "<button><i class=\"fa fa-plus\" onclick=\"addSection('up',this)\"></i></button>" + "<label contenteditable=\"true\">section 1</label>" + "</div>" + "</li>"; } このタイプのHTML文字列を作成するためのツールまたはショートカットはありますか? つまり、この場合、すべてのhtmlを手動で入力する必要がありました。記号+を追加する必要があります"。 これを変換できるもの: <li class="chapter up-wrapper-btn"> <div> <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button> <label contenteditable="true">section 1</label> </div> </li> 手で入力する必要があった最初の文字列に
14 javascript  html 

3
VBAとHTMLでオートコンプリートリストの項目をクリックします
Webサイトに詳細を入力できる自動化を作成しました(ただし、内部なので共有することはできません)。以下のコードは、「受信者」というテキストを入力するまで機能します。ただし、この「受信者」フィールドにはオートコンプリートリストがあり、TINや住所などの他のフィールドに入力するためにそれを選択する必要があります。 オートコンプリートリストは、https://jqueryui.com/autocomplete/ またはhttp://demos.codexworld.com/autocomplete-textbox-using-jquery-php-mysql/のリストと非常によく似てい ます。 以下は私のコードです: Sub Automate_IE_Enter_Data() 'This will load a webpage in IE Dim i As Long Dim Url As String Dim IE As InternetExplorer Dim objElement As Object Dim objCollection As Object Dim HWNDSrc As Long Dim wsTemplate As Worksheet Dim objEvent As Object Dim li_arr As Variant …

5
オートフィル入力でChromeが背景画像と色を隠すのを防ぐ方法
Chromeブラウザのオートフィル取り出し効果background-colorやbackground-imageからUsernameとPassword入力フィールド。 オートコンプリートの前 オートコンプリート後 ただし、Chromeブラウザのオートコンプリートにより、アイコンが入力から非表示になり、も変更されましたbackground-color。そのため、アイコンを入力のままにしておく必要があります。 Chromeブラウザがフィールドの背景色を変更して画像を非表示にできないようにすることはできますか? .form-section .form-control { border-radius: 4px; background-color: #f7f8fa; border: none; padding-left: 62px; height: 51px; font-size: 16px; background-repeat: no-repeat; background-position: left 17px center; } .form-section .form-control:focus { -webkit-box-shadow: none; box-shadow: none; } .form-section .form-group { margin-bottom: 21px; } .form-section .form-control[type="email"] { background-image: url('https://i.stack.imgur.com/xhx3w.png'); } .form-section .form-control[type="password"] { …

5
Firefoxでクリックしているときにマウスが移動した場合、HTMLラベルはそれぞれの入力をトリガーしません
次の例では、ラベルをクリックすると、入力の状態が変化します。 document.querySelector("label").addEventListener("click", function() { console.log("clicked label"); }); label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } <input type="checkbox" id="1"> <label for="1">Label</label> コードスニペットを実行する結果を非表示スニペットを展開 Chromeでは、カーソルmousedownをmouseupイベントとイベントの間に移動しても入力はトリガーされますが、Firefoxではチェックボックスの状態は変わりません。 これを修正する方法はありますか?(JavaScriptイベントリスナーを使用しない場合) Firefoxバージョン: 69.0.3 (64-bit) Chromeを使用する場合のアクションの完全なセット。 ラベルの上にあるボタンを押します ボタンを押したままカーソルを(ラベルの外側でも)移動します カーソルをラベルに戻します ボタンを離します
13 javascript  html  css  label 

6
HTMLの上に矢印を描く
HTMLテーブルがあり、1つのセルから別のセルに矢印を描画したいと思います。たとえば、次のようになります。 これはどのように行うことができますか? HTMLの例: <html> <body> <table> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td id="end">9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td id="start">0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> </body> </html> ブラウザのサイズを変更する場合、矢印は(新しい)開始/終了位置に留まるはずです。
13 javascript  html  svg 

2
HTMLファイルピッカーマルチ-使用中のファイルを取得
Window 7でFirefox v73を使用すると、次の問題が発生しました。 私のコードでは、html内のマルチファイルピッカーを使用して、最大100ファイルの視差をアップロードします。 <input type="file" id="files" name="files" multiple> ファイルはREST-APIに送信され、後で処理されます。現在使用中の(ファイルエクスプローラーで)単一のファイルを選択すると、使用中のファイルを選択できないというエラーメッセージ(おそらくウィンドウ別)が表示されます。使用中の1つ以上のファイルを含む複数のファイルを選択しようとすると、エラーは発生しませんが、使用中のファイルに到達してファイルが解放されるのを待機すると、アップロードが停止したように見えます。これにより、タイムアウト(私の場合は1分)を待つように要求されます。 ファイルをアップロードする前に、(使用中のファイルで)問題を検出するオプションはありますか? PS:同じことをChromeで試しましたが、REST-APIにリクエストを送信する前にエラーが返されます。

2
innerHTML内でクリックイベントを取得するにはどうすればよいですか?
私は動的に作成されたこのレイアウトを持っています: for (let i = 1; i < 10; i++) { document.querySelector('.card-body').innerHTML += `<div class="row" id="img_div"> <div class="col-12 col-sm-12 col-md-2 text-center"> <img src="http://placehold.it/120x80" alt="prewiew" width="120" height="80"> </div> <div id="text_div" class="col-12 text-sm-center col-sm-12 text-md-left col-md-6"> <h4 class="name"><a href="#" id="title` + i + `">Name</a></h4> <h4> <small>state</small> </h4> <h4> <small>city</small> </h4> <h4> <small>zip</small> …

4
CSSのすべてのテキストを垂直方向に配置するにはどうすればよいですか?
問題は次のように、特定の文字のようですg、y、q斜面の下には、垂直方向のセンタリングを可能にするものではないことを、尾を持っている、など。ここに問題を紹介する画像があります。 緑色のボックスの文字は、下向きの尾がないため、基本的に完璧です。赤いボックス内の問題は、問題を示しています。 すべてのキャラクターを完全に垂直方向に中央揃えにしてください。画像では、下向きの尾を持つ文字は垂直方向に中央揃えされていません。これを修正することは可能ですか? ここに問題を完全に示すフィドルがあります。 .avatar { border-radius: 50%; display: inline-block; text-align: center; width: 125px; height: 125px; font-size: 60px; background-color: rgb(81, 75, 93); font-family: "Segoe UI"; margin-bottom: 10px; } .character { position: relative; top: 50%; transform: translateY(-50%); line-height: 100%; color: #fff; } <div class="avatar"> <div class="character">W</div> </div> <div class="avatar"> <div class="character">y</div> …

3
TCPDFフルページテーブル
写真に示すように、テーブルをページ(A4)に合うようにさまざまな方法で試しました。多くの 検索を行いましたが、Webで役立つものを見つけることができませんでした。私は動的テーブルを使用していますが、テーブルの幅以外はすべて問題ありません。これが私のコードです: $content = '<table><thead><tr><th class="bg-dark text-white" align="center">#</th><th align="center" class="bg-dark text-white">Code</th><th align="left" class="bg-dark text-white">Description</th><th align="center" class="bg-dark text-white">Item Type</th></tr></thead><tbody><tr style="background-color: #f2f2f2;"><td align="center">1</td><td align="center">1001</td><td align="left">Pofak</td><td align="center">Fixed Price</td></tr><tr ><td align="center">2</td><td align="center">1002</td><td align="left">Ice</td><td align="center">Weight</td></tr><tr style="background-color: #f2f2f2;"><td align="center">3</td><td align="center">1003</td><td align="left">Minoo</td><td align="center">Fixed Price</td></tr><tr ><td align="center">4</td><td align="center">1004</td><td align="left">Bastani</td><td align="center">Fixed Price</td></tr><tr style="background-color: #f2f2f2;"><td align="center">5</td><td align="center">1005</td><td align="left">Chocolate</td><td align="center">Weight</td></tr><tr ><td …
11 php  html  css  tcpdf 

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.