Question

我目前正在处理一个需要包含一些信息的表的Web项目。一个例子是这样的句子：

按X％提高收入
再卖X件物品

有没有这样的句子，只需点击X并填充一个值？我玩过输入字段，但是我很难格式化并让它看起来很好看。

输入是有效的，但有任何建议使它看起来完美无瑕，而不像两个不同的句子？

连连呢？我有两个div可供您查看：

<!-- Base one -->
<div id="baseOne">
    * Boost revenue by <span id="baseOneReplace">X</span> %
</div>

<!-- Base two -->
<div id="baseTwo">
    * Boost revenue by <input id="baseTwoInput" value="X"> %
</div>

http://jsfiddle.net/rLr7C/

Answer 1

使用contenteditable <span>：

＆＃13;

<div id="baseTwo">
    * Boost revenue by <span id="baseTwoInput" contenteditable>X</span> %
</div>

＆＃13;

Answer 2

可访问的方法是使用input元素，但根据需要设置样式。这里最明显的问题是，默认情况下，input框宽，大约20个字符。一种解决这个问题的方法：

<label for="boost">Boost revenue by</label>
<input id="boost" size=2 style="width: 2em">%

这种方法即使在禁用JavaScript时也能正常工作，这与使用span contenteditable（本身不需要JavaScript）相反，但是将数据从这样的元素转换为提交的表单的唯一方法数据是使用JavaScript）。

如果需要，请将placeholder="X"添加到input标记中。使用value="X"会产生误导，因为它设置了默认（初始）值，该值应该是有效值（以及用户经常要选择的值）。

您还可以将input的字体系列和字体大小设置为与周围文本相同，但最好的方法取决于样式的整体设计。

可以删除默认边框，但几乎不是一个好主意：用户如何看到有一个地方他可以并且预计会输入一些输入？

Answer 3

添加一些CSS来格式化它（大纲：0除去发光的选择框，除非你需要它）

#baseTwo input {
    border: 0px;
    width: 14px;
}

#baseTwo input:focus {
    width: 14px;
    outline: 0;
}

添加

onfocus="this.value = '';"

到input元素以允许它在点击

上删除X.

JSFiddle

Answer 4

我刚刚为此制作了一个小的jQuery脚本。也许这会对你有所帮助：

<强> JSFIDDLE

使用Javascript：

$('#baseOneReplace').click(function() {
    $(this).html('<input value="' + $(this).text() + '">');
    $(this).find('input').focus();
    $(this).focusout(function() {
        $(this).html($(this).find('input').val());
    });
});

CSS：

#baseOneReplace input {
    border: 0;
    width: 2em;
}

如何创建无缝输入字段？

4 个答案: