javascriptによるtextboxの値の変更につきまして

Question

現在、モーダルウインドウに表示されるインプットエリアに
入力し、「挿入」ボタンを押した際に、オンクリックイベントで、
上記入力された内容を別のテキストボックスに挿入するコードを書いております。

＜やりたいこと＞
・挿入先のテキストボックスの値がブランクの時（＝未入力時）はインプットエリアに入力
された内容をそのままテキストボックスに挿入する（こちらは動作しております）
・挿入先のテキストボックスに既に値が入力されている場合は、その内容を残しつつ、
インプットエリアに入力された内容をテキストボックスに挿入する

＜つまづいている点＞
テキストボックスの値がブランクの時（＝未入力時）は
挿入が完了できるのですが、既にテキストボックスに値を入力した後に
オンクリックイベントを呼び出しても、テキストボックスの値が変更されない
状況でございます。

色々と試みているのですが、原因が分からない為、
どこを変更すると良いのか、お力添えをいただけますと幸いです。
ご多忙な中恐れ入ります、宜しくお願い致します。

＜javascript部分＞
onclickイベントで呼び出しております。

    <script language="javascript" type="text/javascript">
        function OnLinkClick4(element) {
	    var id = $("input[name='url1']").val();	    
            target = document.getElementById("comment2");       
            var content = $("textarea[name='comment']").val();
            var replaced = content.replace(/<br>/g,"\n")+"\n";
	    target.innerHTML = replaced  + "URL:" + id + "\n";
	    alert(replaced + "URL" + id + "\n")
            document.getElementById('hiddenurl').value = id;
            return false;
        }
    </script>

＜モーダルウインドウ部分＞
以下がモーダルウインドウの部分でございます。
「挿入」を押すとウインドウを閉じ、オンクリックイベントを
呼び出しております。
本ウインドウは一番下のフォームの「引用」リンクをクリックすると
呼び出される形となっております。

	<div id="modal-content">
		<div id="modal-content-innar">
			<!-- モーダルウィンドウのコンテンツ開始 -->
			<p class="red bold">引用元のURLを入力</p>
			<input type="text" name="url1" value="" placeholder="URLを入力する" style="width:80%; padding:10px 5px 10px 5px; color:#a9a9a9;
			border-radius:5px; border-style:solid; border-width:1px; border-color:#a9a9a9;">
			<a  style="" id="modal-close"  onclick="OnLinkClick4(this);">挿入する</a>
			<p><a id="modal-close" class="button-link">閉じる</a></p>
		</div>
		<!-- モーダルウィンドウのコンテンツ終了 -->
	</div>

＜フォーム部分＞
以下がフォーム部分でございます。
オンクリックイベントでcomment2というidのtextareaに値を挿入しております。

			<form enctype="multipart/form-data" action="***" method="post">
					<input type="text" name="title" value="" placeholder="タイトル"
					class="make81">
					
					<div class="textarea">
						<textarea class="make82" name="comment" placeholder="コメントを投稿する" id="comment2"></textarea>
						<strong><a style="font-size:12px; float:right; color:#a9a9a9;  color:#1e90ff;"
						id="modal-open" class="button-link">引用</a></strong>
					</div>
					
					<input type="hidden" value="" id="hiddenurl" name="hiddenurl" >
					<input type="file" name="image" value="画像を投稿" class="make83">
					<input type="text" name="username" value="" placeholder="名前を入力" class="make84">
					<input type="submit" name="submit" value="トピックを作成する" id="make86">
					
				</form>

Answer 1

innerHTMLの挙動はブラウザ間で同じではありません。
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML

テキスト入力欄にテキストが入力された場合、IE は input の innerHTML プロパティの value 属性を変更しますが、Gecko ブラウザは変更しません。

実際に、IEでは反映されるものの、Chrome や Firefox Quantum ではvalue値は変化しません。
素直にvalueを変更するのがいいと思います。

        //target.innerHTML = replaced  + "URL:" + id + "\n";
        target.value = replaced  + "URL:" + id + "\n";

Comments

[退会済みユーザー]

ありがとうございます！解決しました！
引き続き宜しくお願い致します。

Answer 2

以下の記事の応用で質問者さんのやりたいことが実現できないでしょうか？

textarea のキャレット位置に文字列を挿入
http://surferonwww.info/BlogEngine/post/2012/01/09/Inserting-string-at-caret-position-in-textarea.aspx

モーダルウィンドウには jQuery UI の Dialog を使っています。

記事の「実験室」と書いたリンク先にデモがありますのでよろしければ試してみてください。

Comments

[退会済みユーザー]

ありがとうございます！
参考にさせていただきます。