将固定文本放在输入文本框上 | 将固定文本放在输入文本框上

本文介绍了将固定文本放在输入文本框上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何将默认文本放入用户无法删除的 HTML 文本输入元素中(输入开头的固定文本).

How can I put default text in an HTML text input element which the user can't delete (fixed text at the start of the input).

我想要的第二件事是光标将定位在此固定文本之后.

The second thing what I want is that the cursor will be positioned after this fixed text.

推荐答案

如果您只想使用 input 元素解决此问题，您可以使用内联 svg 背景.

If you want to fix this with only an input element you can use an inline svg background.

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

要在 Internet Explorer 中执行此操作，您需要 encodeURIComponent SVG 图像http://pressbin.com/tools/urlencode_urldecode/

To make this work in Internet Explorer you need encodeURIComponent the SVG imagehttp://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" />

这篇关于将固定文本放在输入文本框上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！