Home Explore Help
Sign In
games
/
typingfreaks
mirror of https://github.com/thatsmydoing/typingfreaks.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Add validation for kana input in editor

Thomas Dy 3 years ago
parent
1cca9a21f4
commit
512cdcfe58
2 changed files with 17 additions and 4 deletions
Unified View Show Diff Stats
  1. 11 3
      src/editor.css
  2. 6 1
      src/editor.html

+ 11 - 3
src/editor.css
View File 

@@ -84,8 +84,7 @@ table.level-list {
 
   grid-column: span 2;
 
   grid-column: span 2;
 
 }
 
 }
 
 
 
-.lyrics input.time {
 
-  width: 100px;
 
+.lyrics input {
 
   height: 30px;
 
   height: 30px;
 
   border-radius: 2px;
 
   border-radius: 2px;
 
   border-color: silver;
 
   border-color: silver;
 
@@ -94,7 +93,16 @@ table.level-list {
 
   padding: 0px 8px;
 
   padding: 0px 8px;
 
 }
 
 }
 
 
 
-.lyrics .time:invalid {
 
+.lyrics input:disabled {
 
+  background: lightgrey;
 
+}
 
+
 
+.lyrics input.time {
 
+  width: 100px;
 
+}
 
+
 
+.lyrics .time:invalid,
 
+.lyrics .kana:invalid {
 
   border-color: red;
 
   border-color: red;
 
 }
 
 }

+ 6 - 1
src/editor.html
View File 

@@ -1,6 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html>
 
 <html>
 
   <head>
 
   <head>
 
+    <meta charset="utf-8" />
 
     <title>Typing Freaks Editor</title>
 
     <title>Typing Freaks Editor</title>
 
     <link rel="stylesheet" href="editor.css" />
 
     <link rel="stylesheet" href="editor.css" />
 
   </head>
 
   </head>
 
@@ -63,7 +64,11 @@
 
       />
 
       />
 
       <button class="play-section">Play</button>
 
       <button class="play-section">Play</button>
 
       <button class="remove-section">Remove</button>
 
       <button class="remove-section">Remove</button>
 
-      <input class="kana" autocomplete="off" />
 
+      <input
 
+        class="kana"
 
+        pattern="[a-zA-Zぁ-んァ-ンー\s]*"
 
+        autocomplete="off"
 
+      />
 
       <input class="kanji" autocomplete="off" />
 
       <input class="kanji" autocomplete="off" />
 
     </template>
 
     </template>
 
     <template id="level-set-template">
 
     <template id="level-set-template">