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

JavaScript関数を使用して変換された値を決定できないという点で、mplungjanの答えは正しいです。最終的には、JavaScript で変換を行う必要があります。

ただし、mplungjanの回答のように、大文字変換でハードコーディングする必要はありません。おそらく、テキストの一部は大文字で、他のテキストは大文字で、他のテキストはまだ正常です。すべてのオプションを知っている限り、これらの各ケースを動的に処理できます。

あなたがすることは、 JavaScript を使用して要素のスタイルを決定し、スクリプトに適切な変換を適用してそこから移動することです。このような変換の優れた例は、mplungjan の回答にあります。

于 2013-01-07T14:54:26.813 に答える
1

値は実際には変更されておらず、スタイリングのみが変更されているため、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のデモンストレーションはこちら。

簡単な説明：\bRegExpの先頭にあるは、任意の単語の先頭を検索し、\w（括弧内にキャプチャされているため）その位置にある任意の1文字の英数字をキャプチャします。次に、これは関数の引数に格納されます。この引数p1は、大文字のバージョンを返すだけです。

于 2013-01-07T15:02:34.353 に答える
1

いいえ、text-transform表示のみの変換であり、要素内のデータを実際に変更することはありません。

于 2013-01-07T14:57:42.393 に答える