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

是否可以在输入框中显示大写文本，但用户是否复制小写形式？

3 个答案:

编辑：

编辑2