Html Put a fixed text on an input text

2020-03-19 07:15发布

站内问答 / 移动开发
1800 6 6

How can i put a default text in an input html element which user can't delete(ficed text on start of the input ) . The second thing what i want that the cursor will be indexedafter this fixed text.

标签： html
举报
6条回答
▲ chillily
2楼-- · 2020-03-19 07:50

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

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

HTML

<input type="text" />

CSS

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;
}

To make this work in Internet Explorer you need encodeURIComponent the SVG image http://pressbin.com/tools/urlencode_urldecode/

查看更多
0人赞 添加讨论(0) 举报
狗以群分
3楼-- · 2020-03-19 07:51

Absolutely position the text over the beginning of the field then add left padding to the field until the cursor lines up to the right position. See example here: http://www.accessfinancialservices.co.uk/calculators/mortgage-calculator/

查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
4楼-- · 2020-03-19 07:53

try this one might be helpful for you.

http://jsfiddle.net/pZLcg/ 

<div class="input-box">
  <input value="" autofocus="autofocus"/>
  <span class="unit">£</span>
</div>
查看更多
0人赞 添加讨论(0) 举报
贼婆χ
5楼-- · 2020-03-19 07:55

I know this question is already answered, but here is another way to do it.

<!DOCTYPE html>
<html>
<head>
    <style>
    #text_container
    {
        padding: 1px;           /*To make sure that the input and the label will not overlap the border, If you remove this line it will not display correctly on Opera 15.0*/
        border: 1px solid activeborder; /*Create our fake border :D*/
    }
    #text_container > label
    {
        color: activeborder;
        background-color: white;    

        -webkit-touch-callout: none;    /*Make the label text unselectable*/
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    #text_container > input
    {
        border: none;           /*We have our fake border already :D*/
    }
    </style>
</head>

<body>
    <span id="text_container">
    <!-- Don't break the following line to avoid any gaps between the label text and the input text -->
    <label>http://www.</label><input type="text" />
    </span>
</body>
</html>

I tested this code with..

Firefox 22
Google Chrome 28
Internet Explorer 10
Safari 5
Opera 15
查看更多
0人赞 添加讨论(0) 举报
唯我独甜
6楼-- · 2020-03-19 07:55

just use placeholder="Name" for example:

查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
7楼-- · 2020-03-19 07:57 
var requiredText = 'http://';
    $('#site').on('input',function() {
        if (String($(this).val()).indexOf(requiredText) == -1) {
            $(this).val(requiredText);
        }
    });
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)