html - 入力テキストボックスに定型文を入れる

Question

ユーザーが削除できないHTMLテキスト入力要素にデフォルトのテキストを配置するにはどうすればよいですか(入力の開始時に固定テキスト)。

2 番目に必要なのは、カーソルがこの固定テキストの後に配置されることです。

Answer 1

これを試してみてください。お役に立てるかもしれません。絶対配置を使用してテキスト入力の上にテキストを配置します。

.input-box { 
  position: relative; 
}

input { 
  display: block; 
  border: 1px solid #d7d6d6; 
  background: #fff; 
  padding: 10px 10px 10px 20px; 
  width: 195px; 
}

.unit { 
  position: absolute; 
  display: block; 
  left: 5px; 
  top: 10px; 
  z-index: 9; 
}

<div class="input-box">
  <input value="" autofocus="autofocus"/>
  <span class="unit">£</span>
</div>

Answer 2

入力要素のみでこれを修正したい場合は、インライン svg バックグラウンドを使用できます。

http://codepen.io/anon/pen/pJoBya

これを Internet Explorer で機能させるには、encodeURIComponent SVG イメージ http://pressbin.com/tools/urlencode_urldecode/が必要です。

input {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><text x="5" y="19" style="font: bold 16px Arial;">Age:</text></svg>') no-repeat;
  border: 1px solid #555;
  box-sizing: border-box;
  font: 16px "Arial";
  height: 30px;
  padding-left: 50px;
  width: 300px;
}

<input type="text" />

Answer 3

var requiredText = 'https://';
$('#site').on('input', function() {
  if (String($(this).val()).indexOf(requiredText) == -1) {
    $(this).val(requiredText);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="site" />

Answer 4

フィールドの先頭にテキストを絶対に配置し、カーソルが右の位置に来るまでフィールドに左パディングを追加します。ここで例を参照してください: http://www.accessfinancialservices.co.uk/calculators/mortgage-calculator/

Answer 5

たとえば、 placeholder="Name" を使用してください。