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

質問編集履歴

6

修正

2017/10/17 02:14

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,3 @@
1
- [リンク内容](https://teratail.com/questions/96420)
2
1
  【質問したいこと】
3
2
  フォーカスが外れた際と指定時間経過した後に入力項目におけるチェック処理を実装しましたが、JavaScriptにexitなる関数、処理がないためどちらも呼ばれてしまいalertで表示しているエラーメッセージが2度表示されてしまう。
4
3
 

5

質問の追記。修正

2017/10/17 02:14

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -8,7 +8,7 @@
8
8
  指定時間経過時にもチェックを行いたい。
9
9
 
10
10
  【実装した内容、考えていること】
11
- ```JavaScript
11
+ ```JavaScript(main.js)
12
12
  function isTimecheck() {
13
13
  setTimeout("onAutoSave()", 指定時間);
14
14
  }
@@ -16,8 +16,9 @@
16
16
  function onAutoSave() {
17
17
  var result = true;
18
18
  var a = 入力項目.value; //入力項目の入力値を取得する。
19
+ var maxLen = 20; //最大文字数:例で20とする。
19
20
  if (a != '') {
20
- result = チェック処理(a);
21
+ result = WordCountCheck(a, maxlen);
21
22
  if (result == false) {
22
23
  alert(エラーメッセージ);
23
24
  入力項目.focus(); //フォーカスを入力項目に戻す。
@@ -29,15 +30,34 @@
29
30
  isTimeCheck();
30
31
  }
31
32
  ```
33
+ ```JavaScript(check.js)
34
+ function WordCountCheck(str, maxLength) {
35
+ var i = 0;
36
+ var len = 0; //バイト数を格納する。
37
+ str.value = rightTrim(str.value);//不要な右側スペースは削除する。
38
+ var val = str.value;
39
+ if(val !=""){
40
+ for(; i<val.length; i++) {
41
+ 半角なら1バイトなので1をlenに加算。
42
+ 全角なら2バイトなので2をlenに加算。
43
+ }
44
+ if(maxLength < len){
45
+ alert(エラーメッセージ);
46
+ str.focus(); //フォーカスを入力項目に戻す。
47
+ return false;
48
+ }
49
+ }
50
+ }
32
- ```html
51
+ ```
52
+ ```html(Test.html)
33
53
  <TD>
34
- <textarea cols="" rows="" name="" style="" onBlur="チェック処理">入力項目</textarea>
54
+ <textarea cols="" rows="" name="" style="" onBlur="WordCountCheck(this, 20);">入力項目</textarea>
35
55
  </TD>
36
56
  ```
37
57
  このHTML部分を
38
58
  ```html
39
59
  <TD>
40
- <textarea cols="" rows="" name="" style="" onChange="チェック処理">入力項目</textarea>
60
+ <textarea cols="" rows="" name="" style="" onChange="WordCountCheck(this, 20);">入力項目</textarea>
41
61
  </TD>
42
62
  ```
43
63
  このようにした場合、onBlurのときと同じデータで試した際に1度のみポップアップが出ていたのですがこれだと値が変わってエラーメッセージが出た後に変更しないでフォーカスアウトした場合などにチェックできないので不満足になってしまいます。
@@ -57,13 +77,13 @@
57
77
  【試してみたこと】
58
78
  ```html
59
79
  onBlur部分を以下のよう(見やすくするためJSに記載しています。)にしてみたところ、当然ロストフォーカス時にはチェックがかからず、指定時間経過時もチェックはかからない。onAutoSaveが先に呼ばれていたようなので、そこでチェックエラーとなった場合はonBlurの処理を行わないようにグローバル変数のcheckFlgをtrueにするようにしてみました。しかし、alertが2回出てしまいます。
60
- onBlur="isLostFocusCheck();"
80
+ onBlur="isLostFocusCheck(this);"
61
81
  ```
62
82
  ```JavaScript
63
83
  var checkFlg=false;
64
- function isLostFocusCheck() {
84
+ function isLostFocusCheck(str) {
65
85
  if(checkFlg==false) { //自動保存でチェックエラーとなっていた場合はcheckFlgがtrueとなっているためこのifはスルーされるはず。
66
- チェック処理;
86
+ WordCountCheck(str, 20);
67
87
  }
68
88
  }
69
89
  ```

4

修正

2017/10/17 01:22

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -56,9 +56,14 @@
56
56
  ~質問追加~
57
57
  【試してみたこと】
58
58
  ```html
59
- onBlur部分を以下のようにしてみたところ、当然ロストフォーカス時にはチェックがかからず、指定時間経過時もチェックはかからない。
60
- onBlur="var result=false;result=true;if(result==false)チェック処理;"
59
+ onBlur部分を以下のよう(見やすくするためJS記載しています。)にしてみたところ、当然ロストフォーカス時にはチェックがかからず、指定時間経過時もチェックはかからない。onAutoSaveが先に呼ばれていたようなので、そこでチェックエラーとなった場合はonBlurの処理を行わないようにグローバル変数のcheckFlgをtrueにするようにしてみました。しかし、alertが2回出てしまいます。
60
+ onBlur="isLostFocusCheck();"
61
61
  ```
62
+ ```JavaScript
62
- result=true;
63
+ var checkFlg=false;
64
+ function isLostFocusCheck() {
63
- の部分を指定時間が経過したらtrueとなるように出来れば指定時間前はfalseのためonBlurのチェックが効い、指定時間経過時にtrueとなるため実現可能かと思いますが
65
+ if(checkFlg==false) { //自動保存でチェックエラーとなっいた場合はcheckFlgがtrueとなっているためこのifはスルーされるはず。
64
- その際にsetTimeoutを使用すればよいかと思いますが、setTimeoutで呼んだ先の関数でフラグをONにしたいのですが時間経過しているかどうかの判断はどのように行えばよいのでしょうか?
66
+ チェック処理;
67
+ }
68
+ }
69
+ ```

3

修正追加依頼の対応

2017/10/17 00:36

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -25,6 +25,9 @@
25
25
  }
26
26
  }
27
27
  }
28
+ window.onload = function(){
29
+ isTimeCheck();
30
+ }
28
31
  ```
29
32
  ```html
30
33
  <TD>

2

試してみたことを追加

2017/10/17 00:27

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -48,4 +48,14 @@
48
48
 
49
49
  そもそも、この実装の場合onBlurとonAutoSaveは指定時間経過後にはどちらが先に実行されるのでしょうか?
50
50
 
51
- 知恵をお持ちの方がいましたら、ご教示お願いいたします。
51
+ 知恵をお持ちの方がいましたら、ご教示お願いいたします。
52
+
53
+ ~質問追加~
54
+ 【試してみたこと】
55
+ ```html
56
+ onBlur部分を以下のようにしてみたところ、当然ロストフォーカス時にはチェックがかからず、指定時間経過時もチェックはかからない。
57
+ onBlur="var result=false;result=true;if(result==false)チェック処理;"
58
+ ```
59
+ result=true;
60
+ の部分を指定時間が経過したらtrueとなるように出来れば指定時間前はfalseのためonBlurのチェックが効いて、指定時間経過時にtrueとなるため実現可能かと思いますが
61
+ その際にsetTimeoutを使用すればよいかと思いますが、setTimeoutで呼んだ先の関数でフラグをONにしたいのですが時間経過しているかどうかの判断はどのように行えばよいのでしょうか?

1

質問内容の変更

2017/10/16 07:38

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,4 @@
1
1
  [リンク内容](https://teratail.com/questions/96420)
2
-
3
- こちらの類似質問となるのですが、質問欄がわかりにくくなってしまったので
4
- 向こうは一度クローズし、改めてスポットを当てて質問させていただきます。
5
-
6
2
  【質問したいこと】
7
3
  フォーカスが外れた際と指定時間経過した後に入力項目におけるチェック処理を実装しましたが、JavaScriptにexitなる関数、処理がないためどちらも呼ばれてしまいalertで表示しているエラーメッセージが2度表示されてしまう。
8
4