通过JavaScript获取输入的CSS转换值 [英] Getting the CSS-transformed value of an input via JavaScript

问题描述

请考虑以下情况：

HTML

 < input type =textid =sourcevalue =快速棕色狐狸> 
< input type =textid =target> 
  

CSS

  #source 
 {
 text-transform：capitalize; 
} 
  

JavaScript

 函数元素（id）{
 return document.getElementById（id）; 
} 
 
 element（'target'）。value = element（'source'）。value; 
  

---

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

目标是获取文本转换 code> -ed值并将其转储到 #target 中。这是可能实现的吗？

解决方案

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

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

  window.onload = function（）{
 document.getElementById（source）。onblur = function（）{
 var tgt = document。的getElementById（ 靶）; 
 var capitalized = []; 
 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（）; 
} 
} 
  

Consider the following scenario:

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;

---

After CSS styling, #source should display "The Quick Brown Fox".

The objective is to get the text-transform-ed value and dump it into #target. Is this possible to achieve?

解决方案

No. You need to use JavaScript to transform it physically

Assuming you already know that source is text-transformed to capitalize, you can do

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

这篇关于通过JavaScript获取输入的CSS转换值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！