可以在輸入框中顯示大寫文本，但用戶可以復制小寫形式嗎？

Question

我有一個輸入文本框，其值由javascript函數定義。 我希望它以大寫形式顯示文本。 用戶復制文本時，是否可以復制所有小寫形式？

可能的想法是在單擊時將文本框的值改回小寫。

我要這樣做的原因是用戶正在復制區分大小寫的代碼，但是大寫時更容易閱讀。

<input style="text-transform:uppercase" type="text" value="hello" />

Answer 1

樣式僅影響演示。 因此，該值在提交或復制時為小寫。

Answer 2

我通過將原始javascript變量提高為大寫然后將其發送到輸入框來解決。 單擊后，一個函數將減小文本的大小寫。

就我而言，我還希望文本輸入字段突出顯示所有文本，以便可以輕松復制它。 但這引起了問題，因為每次用戶單擊以突出顯示時，都會再次調用降低文本大小寫的功能。 因此，我添加了一個計數器，因此它只操作一次功能。

它在jfiddle中不起作用，因此這是另一個可以使用的鏈接： https ://www.w3schools.com/code/tryit.asp?filename=FELVWXFTQHZQ

HTML：

    <input id="inputBox" onclick="lwrCase(); this.setSelectionRange(0, this.value.length);" spellcheck="false" type="text" value="Loading..." />

Javascript：

// Variable to send
var myVariable = "StackOverflow";

// Send variable in uppercase form to input box
document.getElementById('inputBox').value = myVariable.toUpperCase();

// Variable to indicate state
var lowered = 0;

// Function to restore string to original variable
function lwrCase() {
    if (lowered == 0){
        document.getElementById('inputBox').value = myVariable;
    }
    // Increase counter to indicate the string is restored
    lowered = lowered + 1;
}

確認正在使用以下瀏覽器的最新版本：

• Windows/Mac: Chrome, FireFox, Internet Explorer, Edge, Safari
• Android: Chrome
• iOS9: Safari, Chrome
• iOS6: Safari
• Windows Phone 8.1: Default browser

Answer 3

嘗試這個：

input {
  text-transform: uppercase;
}
input:active {
  text-transform: none;
}

編輯：

的HTML

<input id="input" onkeydown="keyDown()" onkeyup="keyUp()">

的JavaScript

function keyDown() {
  document.getElementById('input').style.textTransform = "none";
}
function keyUp() {
  document.getElementById('input').style.textTransform = "uppercase";
}

編輯2

的HTML

<input id="input" onclick="toggle()">

的JavaScript

function toggle() {
  if (document.getElementById('input').style.textTransform == "none") document.getElementById('input').style.textTransform = "uppercase";
  else document.getElementById('input').style.textTransform = "none";
}