window.blur()は、ウィンドウのフォーカスを外すメソッド。
構文
<script type="text/javascript">
window.blur();
</script>
window.blur();
</script>
サンプルＡ
サンプルＡの動作について
「新たにウィンドウを開く」ボタンをクリックすると、新たなウィンドウを開き、開いたウィンドウを背面に移動する。
2013年6月26日現在、IE9では、フォーカスが外れ背面に移動するが、Firefox、GoogleChromeでは、背面に移動しなかった。
サンプルＡのソースコード
JavaScript
<script type="text/javascript">
function sampleOpenWindow() {
sampleWindow = window.open( '', 'sample', 'width=300,height=300' );
sampleWindow.document.write( "<p>サンプルウィンドウ</p>" );
sampleWindow.blur();
}
</script>
function sampleOpenWindow() {
sampleWindow = window.open( '', 'sample', 'width=300,height=300' );
sampleWindow.document.write( "<p>サンプルウィンドウ</p>" );
sampleWindow.blur();
}
</script>
HTML
<div class="sample">
<button onclick="sampleOpenWindow()">新たにウィンドウを開く</button>
</div>
<button onclick="sampleOpenWindow()">新たにウィンドウを開く</button>
</div>
CSS
<style type="text/css">
.sample button {
font-size: 16px;
}
</style>
.sample button {
font-size: 16px;
}
</style>
サンプルＢ
2013年6月26日現在、IE9ではフォーカスが外れたが、Firefox、GoogleChromeではフォーカスが外れなかった。
サンプルＢの動作について
「新たにウィンドウを開く」ボタンをクリックすると、新たなウィンドウを開き、開いたウィンドウを背面に移動する。
2013年6月26日現在、IE9では、フォーカスが外れ背面に移動するが、Firefox、GoogleChromeでは、背面に移動しなかった。
サンプルＢのソースコード
JavaScript
<script type="text/javascript">
window.onload = initialize;
function initialize() {
document.getElementById( 'sampleOpenWindow' ).onclick = sampleOpenWindow;
}
function sampleOpenWindow() {
sampleWindow = window.open( '', 'sample', 'width=300,height=300' );
sampleWindow.document.write( "<p>サンプルウィンドウ</p>" );
sampleWindow.blur();
}
</script>
window.onload = initialize;
function initialize() {
document.getElementById( 'sampleOpenWindow' ).onclick = sampleOpenWindow;
}
function sampleOpenWindow() {
sampleWindow = window.open( '', 'sample', 'width=300,height=300' );
sampleWindow.document.write( "<p>サンプルウィンドウ</p>" );
sampleWindow.blur();
}
</script>
HTML
<div class="sample">
<button id="sampleOpenWindow">新たにウィンドウを開く</button>
</div>
<button id="sampleOpenWindow">新たにウィンドウを開く</button>
</div>
CSS
<style type="text/css">
.sample button {
font-size: 16px;
}
</style>
.sample button {
font-size: 16px;
}
</style>