具有预定义值的输入字段

Question

有没有人对如何使用固定的第一个值来处理以下要求的输入字段有任何建议：

1. 不使用已经拍摄的元素。
2. 使用任何宽度的值。

示例：

由于

Answer 1

我们可以使用Javascript实现这一目标。

http://jsfiddle.net/Gq65g/

在这里，我创建了2个输入框：

• 首先获取用户输入，并且可见
• 第二个用于存储实际值，并且是不可见的

第一个将值传递给第二个。

HTML

<div class="input">
<div class="preval">
<span>http://</span>
</div>
<div class="text">
<input type="text" onchange="process(this)">
<input type="url" id="data" name="data" style="display:none;">
</div>
</div>

CSS

div.input {
    display: table;
    height: 45px;
    width: 500px;
    border: 1px solid #3bc;
    border-radius: 5px 0 0 5px;
    font-size: 1.5em;
    position: relative;
    overflow: hidden;
}
div.input *{
    position: relative;
}
div.input div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
div.input div.preval {
    height: 100%;
    width: 85px;
    padding: 0 10px;
    cursor: default;
    color: #fff;
    background-color: #3bc;
}
div.input div.text {
    padding: 10px;
}
div.input input {
    appearance: none; -moz-appearance: none; -webkit-appearance: none;
    border: 0px;
    width: 100%;
    height: 100%;
    font-size: inherit;
    padding: 0;
}
div.input input:focus {
    outline: #C3E8EC solid 2px;
    outline-offset: 8px;
}

的Javascript

function process(elem) {
    if (elem.value!="") {
        document.getElementById('data').value = "http://"+elem.value;
    }
    else {
        document.getElementById('data').value = "";
    }
}