Question

考虑以下情况：

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。这有可能实现吗？

Answer 1

没有。您需要使用JavaScript进行物理转换

假设您已经知道源文本转换为大写，您可以

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(" ");
  }
}

Answer 2

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

但是，您不需要像在mplungjan的答案中那样对大小写转换进行硬编码。也许你的一些文本是大写的，而其他一些文本是大写的，而其他文本是正常的。只要您了解所有选项，就可以动态处理每种情况。

你要做的是determine the style of the elements using JavaScript，然后在你的脚本中应用适当的转换并从那里开始。这种转变的一个很好的例子就是mplungjan的答案。

Answer 3

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

Answer 4

将CSS转换后的值从source复制到target将不起作用，因为该值实际上没有更改，只有样式具有。其他样式属性（如font-family或color）不会传输; 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示范here。

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

通过JavaScript获取输入的CSS转换值

4 个答案: