- ベストアンサー
jQueryのfocus,blurが機能しない？初心者が質問
- jQuery初心者がフォームのテキストの表示と入力時の挙動を調整するためにfocusとblurを使用していますが、うまくいっていません。
- class名が間違っている可能性があるため、class名を正しく設定するか確認してください。
- jQueryのコード内に不備がある可能性があります。コードを再確認して、正しく動作するように修正してください。
- emuemu84
- お礼率81% (9/11)
- その他（プログラミング・開発）
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- ajax&php post 一部更新
http://okwave.jp/qa/q7574571.html でもご質問させていただきましたが、ajaxを使用してphpファイルに記述のあるmysql insert文でデータベースの登録はできました。 bbs.php <table class="commentlist"> <!-- bbs.inc.phpファイルという別ファイルでfor文で一覧を出している。 --> </table> <!-- ここからがコメントの入力 --> <form method="post"> <input type="text" name="comment" id="comment" value="" /> <input type="button" name="save" id="save" value="投稿" /> </form> $("#save").click(function(){ var p = $("#comment").val(); $("#comment").val(""); $.post( "bbs.php", { request:p, success: (ここがわからない。)}); }); としたときにフォームでpostしたときにページ全体にリロードではなくclass="commentlist"の一覧のみリロードしたいのですが、どうもできません。 どなたかご教示お願いします。 (bbs.inc.phpはソース内には残したくないです。)
- 締切済み
- AJAX
- focus()が上手くいかない
困っています、助けてください。 フォームのテキストボックスの入力された文字数をチェックし、 サイズオーバーなら、アラートを表示し、テキストボックスにフォーカスを移動させたい。 のですが、上手く動いてくれません。 コードは次の通りです。どこがおかしいのか？どうすれば改善できるのか？ 教えてください。 <form method="post" action="#"> <input type="text" name="fmTitle" onBlur="checkText(this)"> </form> <script type="text/javascript"> <!-- function checkText(aText) { if (aText.value.length > 100) { alert('サイズオーバーです'); aText.focus(); } } //--> </script>
- ベストアンサー
- JavaScript
- form変数の初期化
<br /><b>Notice</b>: Undefined index: your_name in <b>C:\xampp\htdocs\test\index.php</b> on line <b >83</b><br /> 入力画面で上記のエラーが解決しません。 どうすればいいでしょうか？ 入力画面 <?php $_POST = array(); ?> <form method="post" action="./form_check.php"> <div class="element_wrap"> <label>氏名</label> <input type="text" name="your_name" value="<?php echo $_POST["your_name"]?>"> </div> <div class="element_wrap"> <label>メールアドレス</label> <input type="text" name="email" value=""> </div> <input type="submit" name="btn_confirm" value="入力内容を確認する"> </form> 確認画面 <?php $your_name = $_POST["your_name"]; ?> <form method="post" action="./test.php"> <div class="element_wrap"> <label>氏名</label> <p><?php echo $your_name; ?></p> </div> <div class="element_wrap"> <label>メールアドレス</label> <p><?php echo $_POST['email']; ?></p> </div> <input type="submit" name="btn_submit" value="送信"> </form> <form method="post" action="./index.php"> <!--<input type="button" name="btn_back" onclick="history.back()" value="戻る">--> <input type="submit" name="btn_back" value="戻る"> <input type="hidden" name="your_name" value="<?php echo $_POST['your_name']; ?>"> <input type="hidden" name="email" value="<?php echo $_POST['email']; ?>"> </form>
- 締切済み
- PHP
- javascriptで別ファイルで変数を取得する。
A.htmlで入力した文字をB.htmlに出るようにしたいのですが、全然出ません。 アラートは表示されるのですが、入力欄に何を打っても、 namae と出てしまいます。変数に何も入ってないようです。 これを〔javascript〕って入力すれば、アラートに〔javascript〕って出るようにしたいのですが、どうしたらよろしいでしょうか？ 〔A.html〕 <script type="text/javascript"> var val=namae; window.localStorage.setItem("result", val); </script> <form action="B.htm" id="form1" method="post" onsubmit="check()"> <p>名前<br><input type="text" name="namae" id="buttom" size="28" /></p> <input type="submit" value="送信"/> </form> 〔B.html〕 <script type="text/javascript"> var val = window.localStorage.getItem("result"); alert(val); </script>
- ベストアンサー
- JavaScript
- jQueryが読み込めない
下記のようにサンプルコードを入力し、同一ファイル内にjsファイルを設置しているのですが、機能せず、ただのテキストボックスが表示されるのみです。 大変初歩的な質問ですが、よろしくお願いします。 ■ｐｈｐファイル <body> <form action="" method=""> <label for="user-name">お名前</label><input type="text" id="user-name"><br> <label for="user-kana">フリガナ</label><input type="text" id="user-kana"> </form> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.autoKana.js"></script> <script> $(document).ready(function(){ $.fn.autoKana('#user-name', '#user-kana', {katakana:true}); }); </script> </body> ■jquery.autoKana.js (function ($) { $.fn.autoKana = function (element1, element2, passedOptions) { var options = $.extend( { 'katakana': false }, passedOptions); var kana_extraction_pattern = new RegExp('[^ ぁあ-んー]', 'g'); var kana_compacting_pattern = new RegExp('[ぁぃぅぇぉっゃゅょ]', 'g'); var elName, elKana, active = false, timer = null, flagConvert = true, input; elName = $(element1); elKana = $(element2); active = true; _stateClear(); elName.blur(_eventBlur); elName.focus(_eventFocus); elName.keydown(_eventKeyDown); function start() { active = true; }; function stop() { active = false; }; function toggle(event) { var ev = event || window.event; if (event) { var el = Event.element(event); if (el.checked) { active = true; } else { active = false; } } else { active = !active; } }; function _checkConvert(new_values) { if (!flagConvert) { if (Math.abs(values.length - new_values.length) > 1) { var tmp_values = new_values.join('').replace(kana_compacting_pattern, '').split(''); if (Math.abs(values.length - tmp_values.length) > 1) { _stateConvert(); } } else { if (values.length == input.length && values.join('') != input) { _stateConvert(); } } } }; function _checkValue() { var new_input, new_values; new_input = elName.val() if (new_input == '') { _stateClear(); _setKana(); } else { new_input = _removeString(new_input); if (input == new_input) { return; } else { input = new_input; if (!flagConvert) { new_values = new_input.replace(kana_extraction_pattern, '').split(''); _checkConvert(new_values); _setKana(new_values); } } } }; function _clearInterval() { clearInterval(timer); }; function _eventBlur(event) { _clearInterval(); }; function _eventFocus(event) { _stateInput(); _setInterval(); }; function _eventKeyDown(event) { if (flagConvert) { _stateInput(); } }; function _isHiragana(chara) { return ((chara >= 12353 && chara <= 12435) || chara == 12445 || chara == 12446); }; function _removeString(new_input) { if (new_input.match(ignoreString)) { return new_input.replace(ignoreString, ''); } else { var i, ignoreArray, inputArray; ignoreArray = ignoreString.split(''); inputArray = new_input.split(''); for (i
- ベストアンサー
- JavaScript
- Javascriptリアルタイムエラーチェック
Javascript初心者です。 本を見ながらフォームの入力値のリアルタイムエラーチェックを実装しています。 テキストフィールドへの入力値の妥当性検証はできるのですが、 チェックボックスが一つもチェックされていなかった場合にチェックボックスを囲むfieldsetを赤くさせるのがうまくいきません。 電話番号の形式指定ならば String.prototype.isZip = function(){ return this.isEmpty()||/^\d{3}-\d{4}$/.test(this); } という形です。thisはname属性を参照します。 すべての項目にエラーがない場合に確認画面へ進めるようにしています。 String.prototype.isNotEmpty = function() { return this != ''; } String.prototype.isEmpty = function(){ return this == ''; } String.prototype.isShorterThan = function(n){ return this.length<=n; } String.prototype.isLongerThan = function(n){ return this.length >= n; } String.prototype.isZip = function(){ return this.isEmpty()||/^\d{3}-\d{4}$/.test(this); } String.prototype.isPhone = function() { return this.isEmpty()||/^\d{2,4}-\d{1,4}-\d{4}$/. test(this); } String.prototype.isEmail = function() { return this.isEmpty()||/^([\w-]+\.?)+@[\w-]+(\.([\w-]+))+$/.test(this); } var formValidation = function(name, feedback, fields){ var form = document.forms[name]; for (var i=0; i<form.elements.length; i++){ (function(){ var elm = form.elements[i]; var f = fields[elm.name]; if (f){ f.element = elm; f.process = function(){ var ok = true; if (f.convert) f.element.value = f.convert(f.element.value); if (f.validation) ok = f.validation(f.element.value); if (f.feedback) f.feedback(ok, f.element); return ok; } elm.onblur = function(e){ f.process() } } })(); } form.onsubmit = function(){ var all_ok = true; for (key in fields) if (fields[key] && !fields[key].process()) all_ok = false; return feedback(all_ok); }; } </script> <script type="text/javascript"> <!-- <![CDATA[ window.onload = function(){ var fields = { 'last_name':{ convert: function(val){ return val.cnvKana('asKV').trim() }, validation: function(val){ return val.isNotEmpty() && val.isShorterThan(16) }, feedback: function(ok, elm){elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272'; } }, 'furigana':{ convert: function(val){ return val.cnvKana('sKVC').trim() }, validation: function(val){ return val.isNotEmpty() && val.isComposedOf(cs.kata.zen+cs.space.han) && val.isShorterThan(32) }, feedback: function(ok, elm){ elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272'; } }, 'phone':{ convert: function(val){ return val.cnvPhone() }, validation: function(val){ return val.isNotEmpty() && val.isPhone() }, feedback: function(ok, elm){elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272';} } 'email':{ convert: function(val){ return val.trim() }, validation: function(val){ return val.isNotEmpty() && val.isEmail() }, feedback: function(ok, elm){ elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272';}, }, }; var feedback = function(ok){ if (ok) alert("確認画面へ進みます。"); else alert("フォームの内容に不備があるようです。再度の確認をお願いいたします。") return ok; }; new formValidation('MAINFORM', feedback, fields); } // ]]> --> <form name="MAINFORM" action="check.php" method="post"> <input name="last_name" type="text"> <input name="furigana" type="text" /> ～～～～～～ <fieldset id="checkboxDemo" name="job"> <legend><img src="images/label_kozanaiyou.gif" width="92" height="18"></legend> <label for="checkbox-1" tabindex="1">オフィス(Word,Excel)</label> <input type="checkbox" name="kouza[]" id="checkbox-1" value="オフィス(Word,Excel)" /> <label for="checkbox-2" tabindex="2">ネットワーク構築</label> <input type="checkbox" name="kouza[]" id="checkbox-2" value="ネットワーク構築" /> <label for="checkbox-3" tabindex="3">WEBデザイン</label><input type="checkbox" name="kouza[]" id="checkbox-3" value="WEBデザイン" /> <label for="checkbox-4" tabindex="4">WEBプログラミング</label> <input type="checkbox" name="kouza[]" id="checkbox-4" value="WEBプログラミング" /> </fieldset> 自分で色々と試してみましたがうまくいかず、皆様のお力を借りたいと思い投稿しました。 詳しい方教えてください。
- 締切済み
- JavaScript
- テキストエリアをenterキーでフォーカス移動したい
複数あるテキストエリア間を、enterキーでフォーカス移動をしたいです。 以下のようにしましたが、２つめのテキストエリアへフォーカス移動すると、改行が入力され、カーソルが２行目へ移動してしまいます。 enterキーを押しているのでこうなってしまうと思うのですが、 カーソルが１行目へ移動するようにするには、どうしたらいいでしょうか？ フォーカス移動後に改行コードがあったら、""にreplaceする・・等、試してみたのですが、なかなか上手くいきません。 どなたかお分かりになる方がいらっしゃったら、教えてください。 <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function FirstFocus() { document.forms.F1.elements[0].focus(); } function nextFocus(n) { if (event.keyCode == 13) { for (var i = 0, f = n.form.elements; i < f.length; i++) { if (f[i] == n) { (f[i + 1] || f[0]).focus(); } } } } //--> </SCRIPT> </HEAD> <BODY onload="FirstFocus()"> <FORM name="F1"> <TEXTAREA name="T1" rows="5" cols="30" onkeydown="nextFocus(this);"></TEXTAREA><BR> <TEXTAREA name="T2" rows="5" cols="30" onkeydown="nextFocus(this);"></TEXTAREA><BR> <TEXTAREA name="T3" rows="5" cols="30"></TEXTAREA><BR> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- textbox内の文字数を判別しfocusを移動させる
textbox内の文字数を判別しfocusを移動させるプログラムを書いたのですが、２つ目のtextboxから記入したりするとうまく動作しません。どうしたらいいのでしょうか？カーソルがどのtextboxにあるか(どのtextboxにfocusしているか)を参照しようとしたのですがそのような関数はあるのでしょうか？教えてください。 <html> <head><title>checkLength</title> <script language="JavaScript"> <!-- document.onkeyup=checkLength; function checkLength() { if(document.form1.text1.value.length==3) document.form1.text2.focus(); if(document.form1.text2.value.length==5) document.form1.text3.focus(); } //--> </script> </head> <body bgcolor="#ffffff"> <form name="form1">半角英数で入力してください。<br> 1...<input type="text" name="text1" size="7"> 3文字入力するとカーソル移動<br> 2...<input type="text" name="text2" size="7"> 5文字入力するとカーソル移動<br> 3...<input type="text" name="text3" size="7"> </form> </body> </html>
- ベストアンサー
- JavaScript
- createElementが一瞬で消えてしまいます
<script type="text/javascript"> <!-- function check(){ if(document.loginform.user.value==""){ var element1=document.createElement("span"); element1.innerHTML="Usernameを入力してください。"; element1.className="error0"; var ojbody1=document.getElementById("titlerror1"); ojbody1.appendChild(element1); false; } if(document.loginform.pass.value==""){ var element2=document.createElement("span"); element2.innerHTML="Passwordを入力してください。"; element2.className="error0"; var ojbody2=document.getElementById("titlerror2"); / ojbody2.appendChild(element2); false; } } // --> </script> <title>ログインページ</title> </head> <body> <div id="error"><font color="red"><?=$error?></font></div> <div id="loginform"> <form id="loginform" name="loginform" action="index.php" method="post"> <fieldset> <p> <div class="titlerror" id="titlerror1"> <label for="user">User Name <span class="hankaku">(半角英数字)</span></label><br /> </div> <input type="text" name="user" value="" id="user" text-align="middle"> </p> <p> <div class="titlerror" id="titlerror2"> <label for="pass">Password <span class="hankaku">(半角英数字)</span></label><br /> </div> <input type="password" name="pass" value="" id="pass" > </p> <div id="submit"> <p class="submit"> <button type="submit" name="login" value="login" class="button" id="login" onclick="check()"><img src="submit.png" border="0" alt="login" /></button> </p> </div> </fieldset> </form> </div> </body> javascript初心者です。 これを実行するとつくられたタグが一瞬だけ表示して消えてしまいます。（CSSを付けると） 上記は表示すらしません。 どこが間違っているか、なぜそうなのかを教えていただけると助かります。 お願いします。
- ベストアンサー
- JavaScript
- エンターキーで画像にフォーカス
エンターキーを押すと画像にフォーカスが移るようにしたいのですが、 下記のスクリプトをスマホで実行するとiphoneっで文字入力ができなくなります。(chrome) アンドロイドとIphoneで実行ボタンで画像にフォーカスを移すにはどうすれば良いでしょうか --HTML-- <img id="pic" src="img/img.png"/> <input id="comment" type="text" name="comment" runat="server" onkeypress="return submitStop(event);"/> ---JS--- function submitStop(e) { if (!e) var e = window.event; if (e.keyCode == 13) pic.focus; return false; }
- ベストアンサー
- JavaScript
お礼
上手くできました。ありがとうございます。お金払いたいぐらいです!! 本当にありがとうございました。