teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

2019/06/06 11:49

投稿

kinisinai
kinisinai

スコア28

title CHANGED
File without changes
body CHANGED
File without changes

2

コード追加

2019/06/06 11:49

投稿

kinisinai
kinisinai

スコア28

title CHANGED
File without changes
body CHANGED
@@ -3,6 +3,9 @@
3
3
  <追記>
4
4
  下記のようコードでテーブルをクリックしたら編集可能になるものを作成しているのですがその際に編集された場所が空ならrequiredを使ってフォーカスが離れたときに「必須です」みたいなのが出るように実装したのですがどうすればよいでしょうか?
5
5
 
6
+
7
+
8
+ ```jquery
6
9
  <script>
7
10
  jQuery(function($) {
8
11
  $('.tete').click(function() {
@@ -28,4 +31,5 @@
28
31
  ;
29
32
  });
30
33
  });
31
- </script>
34
+ </script>
35
+ ```

1

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

2019/06/06 11:40

投稿

kinisinai
kinisinai

スコア28

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