アプリ版:「スタンプのみでお礼する」機能のリリースについて

VB.NET+Javascriptでプログラミングしているのですが、HTMLに<input>タグ(type=text)、<textarea>タグがありまして、これに値を代入する方法がわかりません。
おしえてくださいーー
※該当タグにJavascriptを使うので、VBのテキストボックスはつかえません><

A 回答 (7件)

お世話になります。



JavaScript のみで操作するという事をおっしゃっているのなら、
DHTML を使う事になるでしょう。
http://homepage2.nifty.com/oto-san/fr1work_paso_ …

document.getElementById 等で要素を取得し、
innerText に値を設定する。とか。

参考URL:http://homepage2.nifty.com/oto-san/fr1work_paso_ …

この回答への補足

レスありがとうございます。
ごめんなさい。説明不足だったかもしれません。

メインは、VB.NETで開発してまして、
下のような問題があり、
http://oshiete1.goo.ne.jp/kotaeru.php3?q=2105310
しょうがなくVB.NETにJavascriptを埋め込みました。
リンク先に書いてあるような、カーソル位置への文字の代入はできたのですが、実装するにあたり、文字の代入を行うタグ(input、textarea)を使いました。
しかし、このタグに「id」を振っても、VB.NETで
txtBody.text と記述しても認識してくれません。
その為、このテキストボックスにVB.NETから値を代入できずに困っているのです。
Javascriptは今回はじめて触ったのでよくわかりません><
詳しく教えてください

補足日時:2006/05/10 10:20
    • good
    • 0

「JAVAで」というのであれば、


テキストボックスが、runat="server"であろうと無かろうと、やることは一緒です。

その発行元のボタンが、runat="server"属性を持つかどうかで、実行方法が異なります。

下のサンプルは、実行ボタンにrunat="server"属性を持たせ、二つのタイプのテキストボックスに値を設定しております。
もし実行ボタンがサーバ側のコントロールでなければ、ASPXにJAVAスクリプトを仕込み、OnClickイベントでそのスクリプトを実行させるだけです。



ほげほげ.aspxのFormタグ中に、以下のコントロールを追加してください

------------------
ほげほげ.aspx
------------------
<!--ASP:TEXT----><asp:TextBox id="TextBox1" runat="server" Width="100%"></asp:TextBox>
<!--HTM:TEXT----><INPUT id="TextBox2" style="WIDTH: 100%" type="text">
<!--ASP:BUTTON--><asp:Button id="Button1" runat="server" Width="100%" Text="ボタン"></asp:Button>



ほげほげ.aspx.vbのボタン処理関連コードの抜粋を以下に書きます。
------------------
ほげほげ.aspx.vb
------------------
Public Class ほげほげ
  Inherits System.Web.UI.Page
  Protected WithEvents Button1 As System.Web.UI.WebControls.Button
  Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox

#Region " Web フォーム デザイナで生成されたコード "
~略~~
#End Region

  Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
    Dim l_strCmd As String = ""

    '//JAVAコマンドを作成していく
    l_strCmd &= JAVA_作成_テキスト設定("TextBox1", "あいうえお")
    l_strCmd &= JAVA_作成_テキスト設定("TextBox2", "かきくけこ")

    '//コマンドを発行
    Call JAVA_発行(l_strCmd)
  End Sub

  Private Sub JAVA_発行(ByVal p_strCmd As String)
    '//JAVA発行用のタグを追加
    Dim l_strJAVA As String = _
      String.Format("<script language=JavaScript>{0}</script>", p_strCmd)

    '//発行
    Call RegisterStartupScript("dummy", l_strJAVA)
  End Sub

  'テキストに値を設定するスクリプトを作成する
  Private Function JAVA_作成_テキスト設定(ByVal p_CtlID As String, ByVal p_strValue As String) As String
    Return String.Format("window.document.all.item('{0}').value='{1}';", p_CtlID, p_strValue)
  End Function
End Class

この回答への補足

レスありがとうございます!
動きました!!ありがとうございます!
でも、一つ問題が><
<textarea>に入れる文字列には、改行コードが入っているんですが、改行コードが入ると動きません><

HTMLのInputを以下のように変更
<!--HTM:TEXT----><textarea id="TextBox2" style="WIDTH: 100%" > </textarea>

ソースを以下のように変更
l_strCmd &= JAVA_作成_テキスト設定("TextBox2", "かき"+VbCrlf+"たちつてと")

これで実行しても何も表示されません。
特殊なことが必要なのでしょうか?

補足日時:2006/05/10 18:24
    • good
    • 0

JAVAのページをおっていくと、いろいろサンプルあるのですが、汎用性のあるスクリプトに修正する手間がかかるので、簡便してくださいね^^;;




ところでJAVAのページでも質問されているようですね。。。

このまんまを利用するのが、一番簡単かもしれません
http://okwave.jp/kotaeru.php3?q=2140106


------------------
ほげほげ.aspx
------------------
<!--HTM:TEXTAREA--><TEXTAREA id="TextArea1" style="WIDTH: 100%; HEIGHT: 200px" name="TextArea1"><%=テキストエリア文字%></TEXTAREA>
<!--ASP:BUTTON--><asp:Button id="Button2" runat="server" Width="100%" Text="ボタン"></asp:Button>


------------------
ほげほげ.aspx.vb
------------------
Public Class ほげほげ
  Inherits System.Web.UI.Page
  Protected WithEvents Button2 As System.Web.UI.WebControls.Button
  Protected テキストエリア文字 As String

  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    テキストエリア文字 = "さしすせそ" & vbCrLf & "なにぬねの"
  End Sub

  Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
    テキストエリア文字 = "はひふへほ" & vbCrLf & "まみむめも"
  End Sub
End Class

この回答への補足

レスありがとうございます!
テキストエリアに文字を入力することができました!
しかし・・・
テキストエリアのカーソルの位置に文字をいれるという当初の目的が実行してもテキストエリアの最後になってしまいます><
何度も質問するのは悪いかと思いますので、新質問で質問してみます!ありがとうございました。助かりました~

補足日時:2006/05/11 14:45
    • good
    • 0

>テキストエリアのカーソルの位置に文字をいれるという当初の目的


それって。。。初耳ですが。。。

とりあえず私が示した手法は、
1.JAVAスクリプトを発行する
2.「ほげ.aspx.vb」での変数値を「ほげ.aspx」に反映させる
ものです。

申し訳ないのですが、私は簡単なJAVAしかわからないので、JAVAカテゴリで「カーソル位置に任意の文字を挿入する方法」を調べ、または質問し、JAVAスクリプトを発行してはいかがでしょうか?

お役に立てる自信があまりありませんデス。。。

この回答への補足

なんどもレスありがとうございます。
超感謝しています。

実は、
http://oshiete1.goo.ne.jp/kotaeru.php3?q=2105310
といった経緯がありまして、VB.NETでJavascriptをつかわざるをへなかったのであります。

それで、Javascriptでテキストエリアの位置に文字をいれるということができました。
しかし、VB.NETで求めた値を、<input>、<textarea>に入れる必要がありました。
そこで、再度質問をしたというわけなのです。

昨日再質問を行なうといったのですが、今までの経緯を説明して且つ質問をどうやって書いたらいいかなやんでしまして、自分で解決しようといろいろ探しています。

再質問するときか、解決したときに、この質問は終了しますー。再質問するときは、ここにリンクをはりますね。

補足日時:2006/05/12 15:16
    • good
    • 0

------------------


<HEAD>
の内部に以下のスクリプト
------------------
<script language="javascript">
//挿入処理()
function Insert() {
□□var i;
□□var insertPos;
□□for (i = 0; i < document.all.length; i++) {
□□□□switch(document.all(i).type){
□□□□□□case 'text':{
□□□□□□□□Insert_Value(document.all(i), '挿入');
□□□□□□□□break;
□□□□□□}
□□□□□□case 'textarea':{
□□□□□□□□Insert_Value(document.all(i), '挿入');
□□□□□□□□break;
□□□□□□}
□□□□}
□□}
}

//イベントの初期化()
function Event_Init(){
□□var i;
□□for (i = 0; i < document.all.length; i++) {
□□□□switch(document.all(i).type){
□□□□□□case 'text':{
□□□□□□□□//エレメントにイベントハンドラを追加する
□□□□□□□□//Insert_Value(document.all(i), '挿入');
□□□□□□□□Event_Create(document.all(i));
□□□□□□□□break;
□□□□□□}
□□□□□□case 'textarea':{
□□□□□□□□//エレメントにイベントハンドラを追加する
□□□□□□□□//Insert_Value(document.all(i), '挿入');
□□□□□□□□Event_Create(document.all(i));
□□□□□□□□break;
□□□□□□}
□□□□}
□□}
}

//イベントの作成()
function Event_Create(p_elem){
□□//高さ・幅が0の隠しオブジェクトを追加する
□□var vHidden = document.createElement('DIV');
□□vHidden.setAttribute('id',GetHiddenID(p_elem));
□□vHidden.setAttribute('width','0');
□□vHidden.setAttribute('height','0');
□□//規定の挿入位置を先頭とする
□□vHidden.innerTEXT = '0';
□□//規定の挿入位置を最後にしたければ↓を利用する
□□//vHidden.innerTEXT = p_elem.value.length;
□□document.body.appendChild(vHidden);

□□//引数のエレメントに[マウスアップ]/[キーアップ]のイベントを追加
□□p_elem.onmouseup = function() {Save_Position(p_elem);};
□□p_elem.onkeyup= function() {Save_Position(p_elem);};
}

//隠しオブジェクトIDの生成マクロ()
function GetHiddenID(p_elem){
□□//隠しオブジェクトの命名を統一するためにマクロ化
□□return p_elem.id + '_hidden';
}

//隠しオブジェクト取得マクロ()
function GetHiddenElement(p_elem){
□□//引数のエレメントから、隠しオブジェクトを取得する
□□return document.getElementById(GetHiddenID(p_elem));
}

//ポジション位置の保存()
function Save_Position(p_elem){
□□//現在のカーソル位置を取得する処理
□□var rng = document.selection.createRange();
□□rng.moveEnd('textedit');
□□var ed = rng.text.length;
□□//やってみたら、テキストエリアだけ2文字ずれるので補正
□□if (p_elem.type == 'textarea') {
□□□□ed -= 2;
□□}
□□
□□//保存実行
□□Save_PositionValue(p_elem, p_elem.value.length - ed);
□□document.title = p_elem.value.length + ' ' + ( p_elem.value.length - ed) + ' ' + ed;
}
//ポジション位置の保存実行)
function Save_PositionValue(p_elem, p_value){
□□//隠しオブジェクトを取得
□□var vHidden = GetHiddenElement(p_elem);
□□//値を設定
□□vHidden.innerTEXT = p_value;
}

//ポジション位置のロード()
function Load_Position(p_elem){
□□//隠しオブジェクトを取得
□□var vHidden = GetHiddenElement(p_elem);
□□return vHidden.innerTEXT;
}

//改行コード対応
function revise_crlf(p_elem, p_pos){
□□var txt = p_elem.value;
□□var LF = '\n';
□□var i;

□□//挿入位置から、左側の文字を取得
□□for (i = 0; i < p_pos; i++) {
□□ if (txt.charAt(i) == LF) {
□□□□□□p_pos -= 1;
□□ }
□□}
□□return p_pos;
}

//挿入実行()
function Insert_Value(p_elem, p_value){
□□//保存されている挿入位置を取得
□□var insertPos = Load_Position(p_elem);
□□
□□//挿入位置の補正を行う
□□//(画面上の改行コードCR[\r] と 内部での改行コードCRLF[\r\n]対応)
□□insertPos = revise_crlf(p_elem,insertPos);

□□//挿入実行
□□var Rng = p_elem.createTextRange();
□□Rng.collapse();
□□Rng.moveStart('character',insertPos);
□□Rng.text = p_value;
}
</script>



------------------
以下はBODY部
------------------
□□<body onload="Event_Init();" MS_POSITIONING="GridLayout">
□□□□<form id="Form1" method="post" runat="server">
□□□□□□<!--ASP:TEXT----><asp:textbox id="TextBox1" runat="server" Width="100%">あいうえお</asp:textbox>
□□□□□□<!--HTM:TEXT----><INPUT id="TextBox2" style="WIDTH: 100%" type="text" value="かきくけこ" name="TextBox2">
□□□□□□<!--HTM:TEXTAREA--><TEXTAREA id="TextArea1" style="WIDTH: 100%; HEIGHT: 200px" name="TextArea1">さしすせそ
なにぬねの</TEXTAREA>
□□□□□□<!--HTM:BUTTON--><INPUT style="WIDTH: 100%" onclick="Insert();" type="button" value="挿入実行">
□□□□</form>
□□</body>
    • good
    • 0
この回答へのお礼

ありがとうございます!
調べてくださっていたのですね。

実行してみたのですが、何も起こらない・・
自分には難しくてなぜ動かないのかわかりません><

お礼日時:2006/05/16 11:59

-------------------------------------------------------------------


まず最初に、この#6の発言は、#5のサンプルソースとセットでの発言です。
1発言内に入りきらなかったので、発言を分割いたしました
-------------------------------------------------------------------

個人的に「JAVAが未経験だからわからないからって、放置する」というのが悔しいので、調査を続けております。


んで、以下の履歴を発見しました。

[167764:テキストボックスに文字挿入したい]
http://okwave.jp/kotaeru.php3?q=167764


フォーカスを持っている間に、カーソル位置を記憶しておく必要があるようです。
そして、このようなサンプルも見つけました。
http://mugi.cc/js/000603.htm


VBでいうパブリックな変数[n]に位置を保存し、ボタン押下時に、その記憶位置を利用し、挿入を行っているようです。
これであれば、テキストやテキストエリア数の変数や配列を持たせ、管理する必要があります。


なので、サンプルを作成しました。
・起動時に「テキスト」/「テキストエリア」を対象エレメントを取得
・その[対象エレメント.ID] + _'hidden'というIDを持った「新規エレメント」を、非表示で作成
・対象エレメントに[onkeyup]と[onmouseup]のイベントハンドラを追加
・イベントハンドラにより得たタイミングで、カーソルの位置を記憶
・「挿入実行ボタン」押下時に、記憶したカーソル位置から、改行コード変換処理を施し、挿入実行
という流れです。

※※※※※※※※※※※※※※※※※※※※※※※
個人的に「業務でのJAVAの経験があまり無いので、
わかる方がいたら、是非修正して欲しい」です。
※※※※※※※※※※※※※※※※※※※※※※※

もし、ボタンがサーバ側であれば、以前のサンプルの方法により、JAVAを発行してあげればよいと思っております。
うまく走るかどうかは実験しておりませんが。。。。


注意!!
#5のソースを一度テキストエディタに落としてください。
その後、以下のいずれかの置換をしてください。
・全角の四角『□』2個を、TAB文字1個
・全角の四角『□』1個を、半角スペース2個
その後、ほげほげ.aspxの中に組み込んでください。

この回答への補足

レスありがとうございます。
入れてみたのですがうまく動かない><

自分なりの回答がでましたのでソースを書きます。

参考サイト
http://himajin.moo.jp/request/tag5.html

以下今のソース

<script language="jscript">
var n=0,flg=0,leng=24,SelCtrl=0;
var leng2=0,flg2=0
txbMessage=TextAreaString
function PosMess(){
var r=document.selection.createRange();
r.collapse();
r.moveEnd("textedit");
n=r.text.length;
flg=1;
SelCtrl=1;
}
function PosTitle(){
var r=document.selection.createRange();
r.moveEnd("textedit");
n=r.text.length;
SelCtrl=2;

}
function InsertMess(str){
var r=obj.txbMessage.createTextRange();
r.collapse();
xx=obj.txbMessage.value.length-n+leng;
t=obj.txbMessage.value.substring(0,xx);
xx = t.match(/\n/g);
xx=(xx)?xx.length:0;
r.moveStart("character",obj.txbMessage.value.length-n+leng-xx);
r.text=str;
}
function InsertTitle(str){
var r=obj.txbTitle.createTextRange();
r.collapse();
xx=obj.txbTitle.value.length-n+leng2;
t=obj.txbTitle.value.substring(0,xx);
xx = t.match(/\n/g);
xx=(xx)?xx.length:0;
r.moveStart("character",obj.txbTitle.value.length-n+leng2-xx);
r.text=str;

}
var obj;
function text_command(f,c){
obj=f;
if (c=="日付"){
c=+YY+"年"+MM+"月"+DD+"日"
}
if(SelCtrl==2){
if(!flg2 && document.all){
f.txbTitle.focus();
PosTitle();
}
if(document.all){
InsertTitle(c);
}
}else{
if(!flg && document.all){
f.txbMessage.focus();
PosMess();
}
if(document.all){
InsertMess(c);
}
}
}

</script>

以下ボディ
<input onmouseup="PosTitle()" id="txbTitle" onkeyup="PosTitle()" style="WIDTH: 350px" type="text" maxLength="350" name="txbTitle">
<textarea onmouseup="PosMess()" id="txbMessage" onkeyup="PosMess()" style="WIDTH: 420px; HEIGHT: 260px" name="txbMessage"><%=TextAreaString%></textarea>

<input style="WIDTH: 80px; HEIGHT: 30px" onclick='text_command(this.form,"日付")' type="button" value="日付">

■解説
一応これで、動くようにはなりましたが、Lengに固定値24をいれています。(プログラムとしてよろしくない><)

何も入力しないで実行すると、「r.text.length」になぜか24という数字が入ります。サンプルサイトのプログラムでは、初期実行時にこの初期値をLengという変数に代入して行っているのですが、VB.NETでTextAreaStringに文字を入れることを行うとこの初期値がわからないまま、文字が入力されてしまいカーソル位置がわからなくなってしまいました。そこで初期にLengに24をいれるようにしました。
一応これで正常な動きはしますが、なぜ24が初期値なんでしょうかねー><

補足日時:2006/05/16 11:27
    • good
    • 0

ざっとですが、ソースを拝見いたしました。



私もそのページを見ましたよー
Hauleさんもいくつか発見していうたと思いますが、多くの挿入サンプルは、テキスト、またはテキストエリアが一個だけ用意されていて、一個だけのカーソル位置しか記憶しておりません。

そこで、サンプルを作成したのです。
もし導入できるのであれば、よかったのですが、、、、
わからないのであれば、仕方が無い。。。

直前のテキストエリアでなくても、一度でもカーソルを保持したら、そのカーソルポジションをずっと覚えているサンプルなので、複数ボタンで、「AボタンはAテキストに挿入。BボタンはBテキストアリアに挿入。C・・・・∞」などの処理が必要であれば、流用してくれたら幸いです。

あくまで「ざっと」見ただけなので、leng=24の意味はわかっておりません。

とりあえず、解決の方向に向かっているようで安心いたしました。

これにて発言を終えますね。
それではー
^^
    • good
    • 0
この回答へのお礼

いろいろと、ありがとうございました。
とりあえず、できたやつでやってみますが、
自分がレベルアップしたときに、もう一度1050YENさんのソースをみてチャレンジしてみようと思います。
ありがとうございました。

お礼日時:2006/05/16 14:54

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