4

考虑以下场景：

HTML 

<input type="text" id="source" value="the quick brown fox">
<input type="text" id="target">

CSS 

#source
{
  text-transform: capitalize;
}

JavaScript 

function element(id) {
  return document.getElementById(id);
}

element('target').value = element('source').value;

在 CSS 样式之后，#source应该显示“The Quick Brown Fox”。

目标是获取text-transform-ed 值并将其转储到#target. 这有可能实现吗？

4

4 回答 4

4

不，您需要使用 JavaScript 对其进行物理转换

假设您已经知道 source 已将文本转换为大写，您可以这样做

window.onload=function() {
  document.getElementById("source").onblur=function() {
    var tgt = document.getElementById("target");
    var capitalised = [];
    var parts = this.value.split(" ");
    for (var i=0;i<parts.length;i++) {
      capitalised.push(parts[i].substring(0,1).toUpperCase()+parts[i].substring(1));
    }
    tgt.value=capitalised.join(" ");
  }
}
于 2013-01-07T14:47:48.133 回答
2

mplungjan 的回答是正确的，因为您不能使用 JavaScript 函数来确定转换后的值。最终，您需要在 JavaScript 中进行转换。

但是，您不需要像 mplungjan 的回答那样在大写转换中硬编码。也许您的某些文本是大写的，而其他一些文本是大写的，而其他文本却是正常的。只要您知道所有选项，您就可以动态处理这些情况。

您要做的是使用 JavaScript 确定元素的样式，然后在脚本中应用适当的转换并从那里开始。这种转变的一个很好的例子是mplungjan的回答。

于 2013-01-07T14:54:26.813 回答
1

不，text-transform只是显示转换，实际上并不修改元素内的数据。

于 2013-01-07T14:57:42.393 回答
1

将 CSS 转换后的值从sourceto复制target将不起作用，因为该值实际上并没有改变，只有样式改变了。其他样式属性（如字体系列或颜色）不会转移；text-transform 将以相同的有限方式运行。

如果您想实际更改字符串的值，就像您所做的那样，您将需要使用 JavaScript，可能使用 RegExp。

而不是这个...

element('target').value = element('source').value;

...这段代码应该完全符合您的需要：

element('target').value = element('source').value.replace(/(\b\w)/g, function (m, p1) {
     return p1.toUpperCase();
});

JSFiddle 演示在这里。

简短说明：\b正则表达式开头的 查找任何单词的开头，并且\w（因为它被捕获在括号内）捕获该位置的任何单个字母数字字符。然后将其存储在p1函数的参数中，该参数仅返回大写版本。

于 2013-01-07T15:02:34.353 回答