タグ

javascriptとHTMLに関するn2sのブックマーク (9)

  • <textarea> の値の改行コード | knooto

    JavaScript 上での改行コード JavaScript 上の value (HTMLTextAreaElement の value プロパティ) で取得できる値の改行コードは LF (U+000A ラインフィード。\n) です。 別の改行コードがあっても LF に正規化されます。 例 1行目 2行目 改行コード表示 ここに結果が表示されます。 フォーム送信された値の改行コード フォーム送信された値の改行コードは CRLF (U+000D キャリッジリターン / U+000A ラインフィード。\r\n) です。 別の改行コードがあっても CRLF に正規化されます。 例 (PHP) ソースコード <?php $ta1 = ''; if (isset($_POST['ta1'])) { // 改行コードを \r, \n に変換 $ta1 = strtr($_POST['ta1'], ["

    n2s
    n2s 2020/11/18
    JavaScript上では\nに、送信時は%0d%0aに正規化 / ちなみに<input type="text">では改行削除、<input type="hidden">では正規化されない
  • Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT

    テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ

    Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
  • TableFilter - HTMLテーブルのフィルタリング

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムで必ず求められるのがテーブルベースの一覧表示です。件数が少ない時にはただ表示するだけで十分ですが、数百件を越えるようになると様々な要望があがってきます。その一つがフィルタリングではないでしょうか。 HTMLのテーブルに対してフィルタ機能を追加してくれるのがTableFilterです。検索とはまた違う手軽なフィルタリングを実現してみましょう。 TableFilterの使い方 一例です。カラムの上にフィルタリングするテキストボックスが並んでいます。文字を入力してエンターを押せばデータがフィルタリングされます。 リアルタイムではないようですが、そこは改造できるでしょう。 入力はテキストだけでなく、ドロップダウンなども使えます。 より複雑に、ページネーションなども駆使したデモで

    TableFilter - HTMLテーブルのフィルタリング
  • textarea要素の文字数の扱いについて - console.lealog();

    textareaの闇を見たような気がした。 これは、文字数のカウンターっぽいものを実装するときに気付いて調べたものです。 いわゆるmaxlengthの敷居と、jsから文字列.lengthで取れる値で、文字数のカウントが違う・・ってなったところが事の発端。 20150624追記 コメントで教えていただいたのですが、この挙動はどうやらWebkitのみだそうです。 DEMOみたく適当な実装すると、現状Webkit以外で困ることになるのでご注意ください。 困ったこと Twitterみたく、いわゆる文字数をカウントしたい場合。 楽できるところは楽したいので、こういう指定をしますよね。 <textarea maxlength="140" id="jsTweetArea"></textarea> 改行せずに文字を打った場合は、きっちり140字で打ち止めになってくれます。 ペーストしても、はみ出る分はばっ

    textarea要素の文字数の扱いについて - console.lealog();
  • デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本

    スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンドエンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド

    デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
  • ssig33.com - JavaScript を最下段で読み込むのがあまり有効ではない理由

    この辺主観も混ってくるところではあるんですが。 JavaScript を上の方で読み込んだ場合 JavaScript の読み込みが終わるまでレンダリングされない JavaScript を下の方で読み込んだ場合 JavaScript の読み込み前にレンダリングは終わるが、 JavaScript が読み込まれるまでウオッなんかスクロールガクガクする!!スクロールできねえ!!!みたいになりがち スクロールしなくてもコンテンツが表示されるようなサイトでは下で読み込むアプローチは有効でしょう。しかしながらユーザーがレイアウトを変えられるようなサイトだったり長文コンテンツが沢山出るような可能性が高いサイト(具体的にははてなブログ)などで「スクロールしないとコンテンツが出てこない可能性が十分に高い」場合はかえってユーザビリティを阻害する可能性があります。 ユーザーは経験的に数秒待てばコンテンツが表示され

  • JavaScriptの HTMLエスケープ関数を 140字以内で書いてみる

    JavaScriptで動的にWebページの内容を書き換える場合に、文字列のHTMLエスケープをしたい時がある。具体的には、「& " ' < >」の5つを変換したい。 PHPならhtmlSpecialChars()、Railsならh()でよいが、JavaScriptにはHTMLエスケープ用の関数が用意されていないので自分で書く必要がある。 せっかくなので、Twitterでつぶやける文字数以内で書くことを目指してみる。 で、こうなった。 function h(s){return s.replace(/[&"'<>]/g,function(m){return"&"+["amp","quot","#039","lt","gt"]["&\"'<>".indexOf(m)]+";"})} 123文字。 意外と余裕だ。 クォーテーションのエスケープをしないでいいなら(HTML要素の属性値のHTMLエスケ

  • Win2D 1.9.0 - new text features, high dynamic range colors, ink geometry, and Mandelbrot zooming demo - MSDN Blogs

    Ever found yourself staring at the Output Window, overwhelmed by endless lines of logs and cryptic messages? You're not alone! For years, developers have relied on the Output Window for critical build and debug information. But making sense of it—and translating it into action—has...

    Win2D 1.9.0 - new text features, high dynamic range colors, ink geometry, and Mandelbrot zooming demo - MSDN Blogs
    n2s
    n2s 2011/01/07
    http://www.otsune.com/diary/2007/05/13/1.html#200705131 にそんなデメリットがあったなんて。
  • 約700項目のHTML/スクリプト言語リファレンスを公開

    日経LinuxITproは、総計約700項目のHTML/スクリプト言語リファレンスを公開しました。「HTML」(295項目)、「CSS」(73項目)、「Dynamic HTML」(98項目)、「JavaScript」(295項目)、「Perl」(125項目)あわせて698項目。各項目にサンプルコードを掲載しており、コピーし貼り付けてすぐにお使いいただけます。JavaScriptは「この用例を実行する」という文字をクリックすれば、その場でサンプルコードを実行してみることもできます。 ファンレンスを使いこなすための記事や、「JavaScript入門」「Perlの使い方入門」「CSSの基」「Linuxコマンド道場」「シェル・スクリプト工房」といった入門記事もご用意しました。 これらのリファレンスはここ2~3年かけて作成してきたものです。そのため一部に内容の古いものもありますが、順次更新してい

    約700項目のHTML/スクリプト言語リファレンスを公開
  • 1