プロが教える店舗&オフィスのセキュリティ対策術

ユーザーがWEBページのテキストボックスへ入力するとき、
文字列を2桁入力するごとにハイフンを表示させ、その状態を維持したまま
次に文字列を入力させることは可能でしょうか?

例.
1.ユーザーが「01」と入力
2.ハイフンが表示され、テキストボックスの表示は「01-」となる
3.続けてユーザーが「02」と入力
4.ハイフンが表示され、テキストボックスの表示は「01-02-」となる

この流れで「01-02-AB-CD-E5-F5」とテキストボックスに表示される結果にしたいのです。
その後、テキストボックス文字列をデータベースに取得させます。
(因みに上記英数字はあくまでも例です)

開発環境は以下です。
 ・WinXP SP2
 ・Microsoft Visual Studio 2005(VB2005)
 ・ブラウザはIE6のみを前提としています。
 
いつも質問ばかりで申し訳ございませんが、
もしご存知の方がいらっしゃいましたらどうぞご教授をお願いします。
ヒントになるようなことや参考になるWEBサイトでもアドバイス頂けると嬉しいです。

現場開発経験約3ヶ月ほどなのでわかりやすく説明下さるとなお有難いです。<(_ _)>

A 回答 (4件)

クライアントスクリプトを仕込まないといけないでしょう


<script type="text/javascript">
<!--
function myInsert()
{
  var ss = this.value;
  if ( ss.length % 3 = 0 && ss.length > 0 )
  {
    this.value = ss.substring(0,ss.length-1) +
     '-' + ss.substring(ss.length-1,ss.length);
  }
}
//-->
</script>
といったスクリプトを埋め込んでおきます

Page_Loadイベントなどで
dim cs as ClientScriptManagr = Page.ClientScript
dim s as string
s = "window.onlooad = function() { docuemnt.getElementById('TextBox1').onkeyup = myInsert; }"
if cs.IsIsClientScriptBlockRegistered("myInsert") = False Then
  cs.RegisterClientScriptBlock(Me.GetType(), "myInsert", s)
End if

この回答への補足

アドバイスをありがとうございます。

試したところ「型 'ClientScriptManagr' が定義されていません。」と
「エラー修正」のオプションが表示され3つの候補の一番はじめ、
「ClientScriptManagr'を 'ClientScriptManagr' に変更します。」
を選択すると赤い波線が消えました。

因みに残りの2行は以下でした。
●'ClientScriptManagr'を 'UIClientScriptManagr' に変更します。
●'ClientScriptManagr'を 'Web.UIClientScriptManagr' に変更します。

エラーが表示されなくなったところで実行したところWEBページ上に以下のコードが表示されてしまいました。

window.onlooad = function() { docuemnt.getElementById('TextBox1').onkeyup = myInsert; }

javascriptは既存のコードをコピペしながらほんの数文字ちょこっと変更しているだけなので原因がわかりません。
勉強が足らなくてすみません。<(_ _)>

アドバイスを参考にして実行したコードは以下です。
引き続きご教授頂けると嬉しいです。

【Default.aspx】----------ココから-------------
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

<script type="text/javascript">
<!--
function myInsert()
{
  var ss = this.value;
  if ( ss.length % 3 = 0 && ss.length > 0 )
  {
    this.value = ss.substring(0,ss.length-1) +
     '-' + ss.substring(ss.length-1,ss.length);
  }
}
//-->
</script>

<title>無題のページ</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
</form>
</body>
</html>
----------ココまで-------------


【Default.aspx.vb】----------ココから-------------

Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim cs As ClientScriptManager = Page.ClientScript
Dim s As String
s = "window.onlooad = function() { docuemnt.getElementById('TextBox1').onkeyup = myInsert; }"
If cs.IsClientScriptBlockRegistered("myInsert") = False Then
cs.RegisterClientScriptBlock(Me.GetType(), "myInsert", s)
End If

End Sub

End Class

----------ココまで-------------

補足日時:2008/02/16 19:01
    • good
    • 0

クライアントスクリプトが機能してますか ・・・



Page_Loadで追加しているソースの『</script>』の前に
window.alert("");
を追加してみてください

成功していればページをロードした際にOKボタンだけのアラートが表示されるはずです

次にaspxに埋め込んだ JavaScriptの
『if ( ss.length % 3 = 0 && ss.length > 0 ){』の行の前に
window.alert("myInsert " + ss.length );
を加えてみましょう

myInsertが呼ばれていればアラートを表示するはずです
    • good
    • 0
この回答へのお礼

やっとやっとできました!!

if ( ss.length % 3 = 0 && ss.length > 0 )を
if ( ss.length % 3 == 0 && ss.length > 0 )に変更するとできました。

redfox63様、本当にありがとうございました!!
これですっきり気持ちよく眠れそうです。

JavaScriptって何となく苦手意識を持っていましたが、基礎からちゃんと勉強していこうと思います。

一応、下記に成功したコードを記します。

-------------------------------
%@ Page Language="VB" AutoEventWireup="false" CodeFile="hyphen_080224_1.aspx.vb" Inherits="hyphen_hyphen_080224_1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無題のページ</title>

<script type="text/javascript">
function myInsert()
{
  var ss = this.value;
  if ( ss.length % 3 == 0 && ss.length > 0 )
  {
    this.value = ss.substring(0,ss.length-1) +
     '-' + ss.substring(ss.length-1,ss.length);
  }
}
</script>
</head>

<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
</form>
</body>
</html>
-------------------------------
Partial Class hyphen_hyphen_080224_1
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim cs As ClientScriptManager = Page.ClientScript
Dim s As String

s = "<script language=''>window.onload = function() { document.getElementById('TextBox1').onkeyup = myInsert; }</script>"

If cs.IsClientScriptBlockRegistered("myInsert") = False Then
cs.RegisterClientScriptBlock(Me.GetType(), "myInsert", s)
End If

End Sub

End Class

お礼日時:2008/02/24 01:30

s = "<script language=''>window.onlooad = function() { document.getElementById('TextBox1').onkeyup = myInsert; }</script>"


の部分に間違いがありました

『window.onlood』は window.onload です … oが1つ余分でした

この回答への補足

見捨てないで下さりありがとうございます!!
-----------------------------------
『window.onlood』を window.onload に変更しても同じでした。

因みに次に以下のように変数名「s」→「ss」に変更してみましたが変化ありません。
この変更は間違っていますでしょうか?
何度も何度もすみません。<(_ _)><(_ _)>

-----------------------------------
Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim cs As ClientScriptManager = Page.ClientScript
Dim ss As String

ss = "<script language='JavaScript'>window.onload = function() { document.getElementById('TextBox1').onkeyup = myInsert; }</script>"

If cs.IsClientScriptBlockRegistered("myInsert") = False Then
cs.RegisterClientScriptBlock(Me.GetType(), "myInsert", ss)
End If

End Sub

End Class

補足日時:2008/02/16 23:13
    • good
    • 0

いろいろタイプミスがあったようですね …



『docuemnt』はdocumentが正解です

この回答への補足

『docuemnt』をdocumentに変更しても結果が同じだったので
下記のようにコードの一部を変更しました。
-----------------------------------------
Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim cs As ClientScriptManager = Page.ClientScript
Dim s As String

s = "<script language=''>window.onlooad = function() { document.getElementById('TextBox1').onkeyup = myInsert; }</script>"

If cs.IsClientScriptBlockRegistered("myInsert") = False Then
cs.RegisterClientScriptBlock(Me.GetType(), "myInsert", s)
End If

End Sub
-----------------------------------------

javascriptのコードはWEBページ上で表示されなくはなりましたが
あいかわらずハイフンが表示されません。

redfox63様が見知らぬ私を育てようとして下さっているような気がしてなりません。
先ほどのタイプミスとおっしゃっているのは
私を育てようとして下さっているredfox63様の思いやりのある技なんですね。
「ありがとうございます!」

引き続きアドバイス下さると嬉しいです。

補足日時:2008/02/16 21:43
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!