input textのdatalistで特殊文字 mΩ(ΩのuncodeはU+02126)を表示したいですが、うまくいかなくて困っています。
表示はGrid上ですが、ただのinput textのautocomplateのdatalistです。

htmlコードΩを使用した場合は、ω(オメガ)となりました。
Google Chromeを利用しています。
どなたかご教授お願いします。
javascript
1let datalist = document.createElement("datalist"); 2const tempUnits = [{id: 1, text: "mΩ"}]; 3 4tempUnits.forEach((currentValue) => { 5 let option = document.createElement("option"); 6 option["data-value"] = currentValue.id; 7 8 if (currentValue.text === "mΩ") { 9 option["value"] = "m&#x(U+02126)"; // m&#x(U+02126)だとそのまま表示されてしまった。 10 } 11 12 // datalistに追加するようなことをしている。 13 // this.eInput1.appendChild(datalist); 14});
(追記)
この質問で記載しましたのはΩ(U+03A9)のオームのほうです、ᴎのほうになっていると思います。
javascript側で機種依存文字の Ω(U+2126) を使用するとうまくいきます。
以下は実際に使用しているコードです。
C#
1// C#ですが、ただのEnum値です。 2using System.ComponentModel.DataAnnotations; 3 4namespace DomainModel { 5 public enum UnitEnum { 6 [Display(Name = "mΩ")] // Ω(U+003A9)を使用 7 Mohm = 1 8 } 9}
javascript
1// ag-gridのcomponentで input type="text" autocomplateとそのdatalistを作成してます。 2function getSelectUnits() { 3 function SelectUnits() { } 4 5 SelectUnits.prototype.init = (params) => { 6 this.params = params; 7 8 this.eInput1 = document.createElement("input"); 9 this.eInput1.value = params.value; 10 this.eInput1.classList.add("ag-input1"); 11 12 this.eInput1.autocomplete = "on"; 13 this.eInput1.placeholder = "-- 選択 --"; 14 this.eInput1.setAttribute("list", "selectUnits"); 15 16 this.eInput1.style.width = "100%"; 17 }; 18 19 SelectUnits.prototype.getGui = () => { 20 return this.eInput1; 21 }; 22 23 SelectUnits.prototype.afterGuiAttached = () => { 24 if ("cellEditorParams" in this.params.colDef) { 25 let datalist = document.createElement("datalist"); 26 datalist.id = "selectUnits"; 27 28 const units = this.params.colDef.cellEditorParams; 29 const unit = this.eInput1.value; 30 this.tempUnits = getSelectFilterData(units, "key", "value", unit); // [{ id: 1, text: "Ω" }, { id: 2, text: "Ω" } ]みたいなこと。 31 32 if (this.tempUnits) { 33 this.tempUnits.forEach((currentValue) => { 34 let option = document.createElement("option"); 35 option["data-value"] = currentValue.id; 36 37 // datalistへの追加処理 38 // Ω(U+003A9) → Ω(U+02126)※機種依存文字 変換 39 let value = currentValue.text.toString().replace(/Ω/, "\u{02126}"); 40 option["value"] = value; 41 42 datalist.appendChild(option); 43 }); 44 45 this.eInput1.appendChild(datalist); 46 } 47 48 // 既にGridにデータがある場合 49 // Ω(U+003A9) → Ω(U+02126)※機種依存文字 変換 50 let value2 = this.eInput1.value.toString().replace(/Ω/, "\u{02126}"); 51 this.eInput1.value = value2; 52 } 53 }; 54 55 SelectUnits.prototype.getValue = () => { 56 // datalistで選択した値をΩ(U+003A9)に変換する ※GridはΩ(U+003A9)の表示の影響を受けなかった。 57 // Ω(U+02126)※機種依存文字 → Ω(U+003A9)変換 58 let value = this.eInput1.value.toString().replace(/Ω/, "\u{003A9}"); 59 this.eInput1.value = value; 60 return this.eInput1.value; 61 }; 62 63 SelectUnits.prototype.destory = () => { 64 // console.log("destory"); 65 }; 66 67 return SelectUnits; 68}
「そのままソースコードにΩを書いておく」、ではだめなのでしょうか?
コメントありがとうございます。
Ωをdatalistにそのまま書くと ”N"の反対向きの文字に変換されました。
ブラウザ環境は何ですか?
情報不足すみません。Google Chromeを利用しています。
htmlコードΩを使用した場合は、ω(オメガ)となりました。
Google Chromeで直接「Ω」を書いてみましたが、再現しません。
https://jsfiddle.net/ct0z3x26/
再現した画面を追加させていただきました。
表示はGrid上ですが、ただのinput textのautocomplateのdatalistです。
いくつか疑問があります。
> mΩ(ΩのuncodeはU+02126)
Ω(U+03A9)とΩ(U+2126)は別字です。ここで疑問なのですが、
> Ωをdatalistにそのまま書くと ”N"の反対向きの文字に変換されました。
ここで書いたものはΩ(U+03A9)とΩ(U+2126)どちらですか?
なお化けた文字はᴎかиに見えますが、どちらにせよ原因が分からず不可解です。
> Ωを使用した場合は、ω(オメガ)となりました。
本当に小文字のオメガになったのでしょうか。だとすると書かれていない部分のコードで変換が掛かっていることになります。コード全体を示してください。
> m&#x(U+02126)だとそのまま表示されてしまった。
そのように書こうとしたのはなぜでしょうか。何かの情報を見たならそれを示してください。
Ωの間違いではないかと思うのですが。
質問文のほうに追記させていただきました。
ここで書いたものはΩ(U+03A9)のほうです。ᴎになりました。
オメガとオームが同じなのか違うのかよくわかっていないので検証してみようと思います。
ご指摘のとおり、変換処理的なことをしていたのですが、最初からΩ(U+2126)にしていたら変換はいらないのかもしれません。これもまだ検証できていませんが。
m&#x(U+02126)を使ったのは、javascriptでunicodeの表示方法をわかっていなかったことです。
そのため、ベストアンサーでご回答いただいた option["value"] = "\u{02126}" の方法を使ったらうまくいったということです。
質問の追記したコードを修正しました。
Ω(U+03A9)⇔Ω(U+2126) の変換についてコード中に追記しました。
サーバー側は機種依存でないほうのΩ(U+03A9)を格納してあげたいです。
※ここではid/textとしているが、idは使わずそのままtextを格納してます。
となるとサーバー側で機種依存文字を使いたくない時、datalistへの表示時にΩ(U+2126)に変換してあげる必要があるのかなと考えましたが、他に何か良い方法はありますでしょうか?
Windows環境での使用予定ではありますが。
現在は変換処理をして使用しています。
やはり小文字ωが出てくるようなコードには見えませんね。
謎は残りますが一応解決済みですし深入りは避けておきます。
回答1件
あなたの回答
tips
プレビュー