詳しい人求む！

inputのフィールドのデフォルト文字をドラッグ（選択）した状態で表示したい

解決済

質問者：MIHO0821
質問日時：2019/05/20 09:53
回答数：1件

社内でブラウザを使ったイントラネット（グループウェアもどき）を開発しています。
ある入力フィールドに「value=」で初期値を表示しているのですが、
ドラッグ（選択して反転）した状態での表示は可能なのでしょうか？
web上では実現しているサイトも多いので可能なのだとは思っていますが…。

これは、ユーザが初期値と異なるものを入力したいときに、
すぐに上書きできることと、Deleteボタンひとつで消去できること、
これらの実現依頼をされているものでして、
web上でいろいろ調べても、どうにも行き詰ってしまいました。
お知恵の拝借をよろしくお願いいたします。

ブラウザはIEを使用しており、クローズしたネットワーク内の
イントラネットですので他のブラウザを使用することはありません。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2019/05/20 12:29

こんにちは

デフォルト値（又は既入力値）全体を選択状態にするということでしょうか？
HTMLの機能だけではできませんが、javascriptを利用すれば可能と思います。

似た機能で、プレースホルダといわれる入力補助の表示機能がありますが、そちらであればHTMLだけで実現可能です。

以下は、それぞれの例です。
（全選択の機能は、「input.autoSerlect」の要素に対して実行されます）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function(){
document.querySelector("input.autoSelect").addEventListener("focus",function(e){
e.target.select();
});
});
</script>
</head>
<body>

<form>
<p>デフォルト値として全選択する例<br />
<input class="autoSelect" type="text" value="default value" />
</p>

<p>Placeholderの例<br />
<input type="text" placeholder="enter your name" />
</p>
</form>
</body>
</html>