質問編集履歴

3

2019/06/06 11:49

投稿

kinisinai
kinisinai

score28

test CHANGED
File without changes
test CHANGED
File without changes

2

コード追加

2019/06/06 11:49

投稿

kinisinai
kinisinai

score28

test CHANGED
File without changes
test CHANGED
@@ -7,6 +7,12 @@
7
7
  下記のようコードでテーブルをクリックしたら編集可能になるものを作成しているのですがその際に編集された場所が空ならrequiredを使ってフォーカスが離れたときに「必須です」みたいなのが出るように実装したのですがどうすればよいでしょうか?
8
8
 
9
9
 
10
+
11
+
12
+
13
+
14
+
15
+ ```jquery
10
16
 
11
17
  <script>
12
18
 
@@ -59,3 +65,5 @@
59
65
  });
60
66
 
61
67
  </script>
68
+
69
+ ```

1

やりたいことを詳細に書きました

2019/06/06 11:40

投稿

kinisinai
kinisinai

score28

test CHANGED
File without changes
test CHANGED
@@ -1 +1,61 @@
1
1
  HTML5のrequiredはsubmitが押された時に発生すると調べた結果わかったのですがsubmitではなく入力チェックを行いたいinputからフォーカスが外れた時に入力なしならチェックしたいのですが可能でしょうか?
2
+
3
+
4
+
5
+ <追記>
6
+
7
+ 下記のようコードでテーブルをクリックしたら編集可能になるものを作成しているのですがその際に編集された場所が空ならrequiredを使ってフォーカスが離れたときに「必須です」みたいなのが出るように実装したのですがどうすればよいでしょうか?
8
+
9
+
10
+
11
+ <script>
12
+
13
+ jQuery(function($) {
14
+
15
+ $('.tete').click(function() {
16
+
17
+ //classでonを持っているかチェック
18
+
19
+ if (!$(this).hasClass('on')) {
20
+
21
+ //編集可能時はclassでonをつける
22
+
23
+ $(this).addClass('on');
24
+
25
+ var txt = $(this).text();
26
+
27
+ //テキストをinputのvalueに入れてで置き換え
28
+
29
+ $(this).html('<input type="text" value="'+txt+'" required="required"/>');
30
+
31
+ //同時にinputにフォーカスをする
32
+
33
+ $('.tete > input').focus().blur(function() {
34
+
35
+ var inputVal = $(this).val();
36
+
37
+ //もし空欄だったら空欄にする前の内容に戻す
38
+
39
+ if (inputVal === '') {
40
+
41
+ inputVal = '';
42
+
43
+ }
44
+
45
+ ;
46
+
47
+ //編集が終わったらtextで置き換える
48
+
49
+ $(this).parent().removeClass('on').text(inputVal);
50
+
51
+ });
52
+
53
+ }
54
+
55
+ ;
56
+
57
+ });
58
+
59
+ });
60
+
61
+ </script>