![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
No.2ベストアンサー
- 回答日時:
簡単にやるなら、window.prompt()だけでもいけそうな気がするけど、味気ないので、好きなレイアウトが可能なようにしてあります。
(<div id="popup">がポップアップのかわりです)
原理は#1様と同様ですが、個々に生成せずに使いまわしています。
最初に表示値を参照するのと、クリアした状態で表示するのとどちらがよいのか不明でしたので、とりあえず参照して表示するようになっています。
A、B、Cにフォーカスするとポップアップもどきが表示されます。
(表示位置を変えたい場合は、スクリプトでpopupの位置を変えてあげればよろしいかと…)
ご参考まで。
<html>
<head><title>test</title>
<style type="text/css">
#popup {
width:200px;
position:absolute;
top:50px; left:200px;
background-color:#eee;
border:3px ridge #aaf;
z-index:5;
display:none;
}
#popup .title {
padding:3px 6px;
background-color:#bbe;
border-bottom:3px ridge #aaf;
}
#popup .title .button {
float:right;
border:1px solid #aaa;
}
#popup .content {
clear:right;
padding:10px;
}
#popup .button {
cursor:pointer;
font-size:80%;
background-color:#ccd;
}
</style>
<script type="text/javascript">
function pp(n) {
var pop = document.getElementById('popup');
var inp = document.getElementById('inp');
if (typeof(n)!='number') {
inp.value = n.value;
this.obj = n;
pop.style.display = 'block';
inp.focus();
return;
}
if (n == 1) this.obj.value = inp.value;
pop.style.display = 'none';
}
</script>
</head>
<body>
<form>
<p>
A:<input type="text" readonly onfocus="pp(this)">
<p>
B:<input type="text" readonly onfocus="pp(this)">
<p>
C:<input type="text" readonly onfocus="pp(this)">
</form>
<div id="popup">
<div class="title">
<input class="button" type="button" value="x" onclick="pp(3)">
hoge
</div>
<div class="content">
input prompt<br>
<input type="text" value="" id="inp"><br>
<input class="button" type="button" value="OK" onclick="pp(1)">
<input class="button" type="button" value="Cancel" onclick="pp(2)">
</div>
</div>
</body>
</html>
自由にデザインできて良いですね。
また、かっこよいデザインだったので、CSSの勉強になります。
この方法で行こうと思います。ありがとうございました。
No.1
- 回答日時:
ちょっと面白そうなので考えてみました。
ライブラリを使うともっと簡単にできそうな気もしますが
とりあえずこれで動きます。
<html>
<head>
<script>
function newwin(){
var w=document.getElementById("newwin");
if(w){
w.parentNode.removeChild(w);
}else{
var n=document.createElement("div");
var txt=document.createTextNode("hogehoge");
n.appendChild(txt);
var e=document.createElement("br");
n.appendChild(e);
var e=document.createElement("input");
e.setAttribute("type","text");
e.setAttribute("id","newtext");
n.appendChild(e);
var e=document.createElement("br");
n.appendChild(e);
var e=document.createElement("input");
e.setAttribute("type","button");
e.setAttribute("value","set");
try{
e.addEventListener ('click',function(event){clickFunc(event)},true);
}catch(event){
e.attachEvent('onclick',function(event){clickFunc(event)});
}
n.appendChild(e);
var e=document.createElement("input");
e.setAttribute("type","button");
e.setAttribute("value","cansel");
try{
e.addEventListener ('click',function(event){newwin()},true);
}catch(event){
e.attachEvent('onclick',function(event){newwin()});
}
n.appendChild(e);
n.setAttribute("id","newwin");
document.getElementsByTagName("body")[0].appendChild(n);
}
}
function clickFunc(event){
var t = (event.srcElement || event.target);
document.getElementById("hoge").value=document.getElementById("newtext").value;
newwin();
}
</script>
<style>
#newwin{
position: absolute;
top: 100px;
left: 100px;
width:200px;
height:200px;
background-Color:#ff0000;
padding:10px;
z-index:2;
}
</style>
</head>
<body>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
<input type="text" name="hoge" id="hoge" readonly><br>
<input type="button" value="open/close" onclick="newwin()"><br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest<br>
</body>
</html>
document.createElementなど知りませんでした。
Javascriptでtry、catchできるなんて驚きです。
また、イベントなど勉強になります。ありがとうございます。
あと、目的に書き忘れてしまったのですが、
テキストフォームで入力した文字列の間に
別窓で入力した文字を挿入したいのですが、
IEしかうまくいきませんでしたので、別で質問させていだきますね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(コンピューター・テクノロジー) PC利用中に勝手に起動する窓を消し去る方法を教えて下さい。 1 2023/05/08 16:48
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- Google Maps iPhoneのGoogle検索窓を通常の大きさに 戻す方法を教えて頂けませんか?(切実) 日本全国の 2 2022/10/02 02:08
- ライフスタイル・ヘルスケア URLを開くアプリが見つかりません 2 2022/09/16 12:09
- 掃除・片付け お風呂の乾燥に関してベストを教えて下さい 4 2022/07/15 01:46
- その他(IT・Webサービス) リンクできない HTMLで<a>タグでリンクを作ったのですがブラウザに表示されません、アドレス、入力 1 2022/07/26 19:43
- JavaScript 【GAS】WEBアプリでハイパーリンクを挿入したい 1 2023/03/12 19:20
- DIY・エクステリア 窓寒さ対策 断熱性 9 2022/12/09 17:04
- Chrome(クローム) 最近Win10にてブラウザが左にスッと隠れていく現象に悩まされてます 3 2023/07/22 23:11
- その他(家事・生活情報) 窓の開閉を軽くする方法について 4 2022/12/19 14:31
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
formのfileの値をhiddenでも持...
-
クリックさせたいが、click()が...
-
IEで,テキストエリアの選択範...
-
開いた子ウィンドウにあるボタ...
-
テキストの背景色を変える。
-
jQueryで設定したイベントハン...
-
SubとEnd Subについて
-
Javascriptで'(シングルクォー...
-
VB.NETで<Input>タグ、<text...
-
onclickが動作しない
-
addEventListenerについて
-
ボタンかリンクをクリックする...
-
JSのボタンを複数う使うには
-
if構文
-
javaScriptの変数をJavaの変数...
-
【誕生日占い】計算結果ごとに...
-
プルダウン 項目が多いので先頭...
-
プルダウンで選択すると、DBの...
-
return trueとreturn falseの用...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
追加ボタンを押した際に ok ボ...
-
javaScriptの変数をJavaの変数...
-
innerHTML内では改行は禁止?
-
formのfileの値をhiddenでも持...
-
ボタンかリンクをクリックする...
-
JavaScriptのfileオブジェクト...
-
onClickがinput type="image"だ...
-
javascriptで作成されたテーブ...
-
開いた子ウィンドウにあるボタ...
-
コードレビューをお願いします。
-
ボタンをクリックするとテキス...
-
ポップアップブロックにならな...
-
VB.NETで<Input>タグ、<text...
-
ボタンをクリックして文字を置...
-
テキストフィールド未入力の場...
-
URL 判定
-
javascriptでtextareaに文字列...
おすすめ情報