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

【问题标题】：Getting the CSS-transformed value of an input via JavaScript通过 JavaScript 获取输入的 CSS 转换值
【发布时间】：2012-12-21 07:28:27
【问题描述】：

考虑以下场景：

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

【问题讨论】：

这篇文章可能对你有所帮助：stackoverflow.com/questions/4478227/…
感谢大家的回答和cmets。可惜我只能接受一个答案...

标签： javascript html input css

【解决方案1】：

将 CSS 转换后的值从 source 复制到 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 演示here.

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

没有。您需要使用 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(" ");
  }
}

【讨论】：

【解决方案4】：

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

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

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

【讨论】：