質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

5回答

2890閲覧

存在しない色を判定する方法

jugemins

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/02/17 20:30

編集2019/02/17 23:37

お世話になります。

Twitterのような「色の入力機能」を考えています。

これです↓
イメージ説明
しかし方法が思いつかない部分があります。

入力された16進数の色が存在しない場合、入力を無効にする機能です。

たとえばテキストボックスに「#FFFFFF」で白になりますが、「#KKKKKK」の場合にその色がないことを判定するためには、どのようにしたらよろしいでしょうか?

下記の「inputColorが存在しなかったら」が知りたい感じです。

<input type="text" id="color"> <scrip type="text/javascript"> $( document ).on( "input", "#color", function () { var inputColor = $( this ).val(); if( inputColorが存在しなかったら ) { console.log( '存在しません' ); } }); </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

ベストアンサー

普通に桁数チェックと isNaN(parseInt(COLOR,16)) 16進数評価だけでいいのでは?

追記(サンプル)

// Javascript Shell にて実行 function check_color(color) { color = color.toLowerCase(); if (color.length !=3 && color.length !=6) { // ブラウザで実行する場合は console.log print("ERROR length : " + color.length); return false; } if (isNaN(parseInt(color, 16))) { // ブラウザで実行する場合は console.log print("ERROR isNaN : " + color); return false; } var _hex = parseInt(color, 16).toString(16).toLowerCase(); while(_hex.length < color.length) { _hex = "0" + _hex; } if (_hex != color) { // ブラウザで実行する場合は console.log print("ERROR NOT EQ : " + color); return false; } // ブラウザで実行する場合は console.log print("OK : " + color); return true; } check_color("12"); // length error check_color("1234"); // length error check_color("12345"); // length error check_color("KKKKKK"); // 16進数ではない check_color("AKKKKK"); // 16進数ではない check_color("000000"); // 正常 check_color("00FF00"); // 正常

投稿2019/02/17 22:33

編集2019/02/19 03:35
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/02/17 23:02

追加でするなら 16進数→10進数→16進数 不足桁数は 0 で埋めて一致比較をする
jugemins

2019/02/19 03:18

たとえば「KKKKKK」という存在しない値までtrueになってしまいませんでしょうか? このようなことですよね?↓ var COLOR = "KKKKKK"; var NUM = String(COLOR).length; if( NUM <= 6 ){ var CHECK = isNaN(parseInt(COLOR,16)); console.log(CHECK); }
退会済みユーザー

退会済みユーザー

2019/02/19 03:19

追加でするなら~のほうも実施してみてください
jugemins

2019/02/19 03:37 編集

すみません、「16進数→10進数→16進数」が理解できませんでした。 「不足桁数は 0 で埋めて」はこうですよね↓ https://jsfiddle.net/q6fjusw8/1/ あとはどのように書けばいいのか教えてもらえませんか?
退会済みユーザー

退会済みユーザー

2019/02/19 03:35

サンプル追加した
jugemins

2019/02/19 03:38 編集

どうもありがとうございます。お手数おかけしました。さっそく使わせて頂きます。
jugemins

2019/02/19 03:57

無事目的の通りにできました。重ねて感謝申し上げます。ありがとうございました。
退会済みユーザー

退会済みユーザー

2019/02/19 04:51

ちなみに isNaN : 数値ではない NaN を返す場合に true となる
guest

0

文字を'0'~'9'、'A'~'F'でチェックすれば

投稿2019/02/17 22:25

y_waiwai

総合スコア87719

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jugemins

2019/02/17 23:29

「#KKKKKK」はどうなるんでしょう?
y_waiwai

2019/02/17 23:41

Kって色があるんですか?
y_waiwai

2019/02/18 00:51 編集

なら、Kという文字が来た時点で条件に合わない、ってはなしでそんでいいんでは '0'~'9'、'A'~'F'、必要なら'a'~'f' でチェックして合わなければNGでいいんでは
m.ts10806

2019/02/18 01:30

> 「#KKKKKK」はどうなるんでしょう? これって人に聞くことではなく「どうするか」は「仕様」なので決めるべきだと思います。 「該当する範囲」が分かっているのであれば「それ以外」は「全て存在しないもの」ですよね。 ホワイトリストですよ。
jugemins

2019/02/18 12:04

申し訳ございません。 「文字を'0'~'9'、'A'~'Z'でチェックすれば」 と読み違えておりました。
guest

0

計算方法は決まってるので
下記のようなサイトを参考にしてみては(ほぼそのままロジックは使えそうですが)、計算式も乗せてくれています

RGBと16進数カラーコードの相互変換ツール

投稿2019/02/17 21:10

編集2019/02/17 21:11
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jugemins

2019/02/17 21:24

変換はいいのですが、「KKK」が有効化否かについてはどう判定されますでしょうか?
m.ts10806

2019/02/17 21:44 編集

000以外でRBGが全て0であれば、という式になるのでは。決まっている以上はホワイトリスト的なチェックになります。
guest

0

適当なタグを作って入れてやれば判断できますが
ブラウザによって解釈が違うので微妙ですね

javascript

1 var div=document.createElement('div'); 2 div.style.color='#ffffff'; 3 console.log(div.style.color.match(/^rgb/)?true:false); 4 var div=document.createElement('div'); 5 div.style.color='#kkk'; 6 console.log(div.style.color.match(/^rgb/)?true:false); 7 var div=document.createElement('div'); 8 div.style.color='#ffff'; 9 console.log(div.style.color.match(/^rgb/)?true:false));

たとえば#ffffのように中途半端なものを色と判断するものとそうでないと
判断するものがあるようです

投稿2019/02/18 01:25

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jugemins

2019/02/19 03:20 編集

具体的なコードをありがとうございます。 正規表現での判定部分について教えてください。 「rgb」で判定出来れば便利ですし、実際にそちらのコードではそれが出来ているようです。しかしなぜ「div.style.color(#ffffff)」には「rgb」という文字列がないのに、matchでtrueが返るのでしょうか? そのことが理解できないためにこちらのコード(https://jsfiddle.net/a3pvLgqf/)を書いても目的が実現できず、苦戦しています。
guest

0

判定してどのようにしたいかにもよると思いますが、CSS4のinvalidセレクタか、Javascriptのoninvalidイベントリスナーを使えば判定は可能かなと思います。

投稿2019/02/17 21:19

dounatsu

総合スコア78

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jugemins

2019/02/17 23:30

「oninvalid」はCSSが無効なときにも効くんですか。ありがとうございます。調べてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問