Web備忘録 プログラミングを中心に技術的な事柄を忘れないように書き残します。
20190130_[Javascript] Webページ印刷時のTips Webページ印刷時の JS, CSS の備忘録 Webページを印刷する際に役立つメモを残します。システムで帳票印刷を手軽に行う際に必要になります。 Javascript で印刷ダイアログを表示する print() を使うことで、印刷ダイアログを表示することができます。 右クリックから印刷メニューをクリックしたり、ブラウザのメ […]
<input type=”file”> で選択できるファイルの拡張子を制限する方法 <input type="file"> でファイルを選択できますが、この時選択できるファイルの種類(拡張子)を制御するには、accept 属性で拡張子もしくはMIMEを設定します。 複数の拡張子を設定もできますし、ワイルドカードを使うこともできます。以下一例です。 & […]
結論 先に結論を書きます。 タグ属性なしでバインド -> innerHTML 属性にバインド タグ属性含めてバインド -> DomSanitizer.bypassSecurityTrustHtml() を使う 1. Angular では HTMLタグがエスケープされてバインドされる セキュリティの都合で、Angularのバインド機能を使って動的に文字列を表示する際は、必ずエスケープされ […]
<input type="file">で選択した画像を表示したい <input type="file">を使って選択した画像を、ファイルをサーバーにsubmit(アップロード)することなくブラウザ上にJavascriptで表示する方法をまとめます。 ファイルをアップロードする前にブラウザ上で選択された画像が確認できるので、プレビュー表 […]
Web画面上でのよくある誤動作 Webページでデータを入力している最中に、誤ってリロードしたり別ページに遷移してしまうことがあります。場合によっては入力内容がすべて消えたり入力途中のデータが破棄されて最初からやり直しになってしまいます。 そのようなことがないように、対策としてページから離脱する場合に確認のメッセージを表示するとよいでしょう。 以下、その方法をまとめます。 Webページのアンロード時 […]
CSS で超過文字を省略したい レイアウトの調整する為に、要素からはみ出すような文字を省略して表示したいことがよくあります。 例えば、超過した文字を折り返して表示すると要素の高さが揃わなくて不細工になったりする場所や、スクロール表示ができないような場所です。1行で収めたいけど尻切れトンボになってしまうと見栄えがよろしくないという場合、文章末尾に「…」と三点リーダーをつけて、ユーザーに続 […]
CSS でテキストを流れるように動かしたい 表示されているテキストを右から左に流して、あふれたテキストが全部読めるようにスクロールする、みたいな動きをCSSで実装してみます。イメージとしては、駅のホームにある電光掲示板のあの感じです。 Javascriptを使えばいくらでもやりようがあるのでしょうが、今回はCSSのアニメーションを使って実装します。CSSのアニメーションは、IE11以降、モダンなブ […]
Javascript で選択中の文字列を取得する window.getSelection – Web API インターフェイス | MDN ブラウザ上のコンテンツを選択状態にし、選択された文字列部分を取得するには、window.getSelection 関数を使います。 window.getSelection 関数は選択範囲を Selection オブジェクトとしてを取得します。Sel […]
CSSでスクロールに追随して位置を固定させたい スクロールしてもある位置で固定され続けるような要素を実現するためのCSS、position: sticky; の使い方についてまとめます。 例えば画面上部で固定表示されるヘッダーや、画面をスクロールして画面上部まで来た時点で固定されるようなサイドメニューなどです。jQueryなどを使って実現できますが、新しいCSSの position: sticky […]
ブラウザのパスワード自動補完を無効にしたい 例えばログインフォームなどで、ユーザー名やパスワードを行ってデータを送信する際に、ブラウザがパスワードを保存するか聞いてくることがあります。ここで保存する設定を行うことで、次回以降の訪問時には、ユーザー名とパスワードが自動入力(オートコンプリート)されるようになります。あるいはユーザー名を入力するとパスワードが自動入力されます。 もろもろの事情がありこの […]
