Question

我想为表单中的某些opacity:0设置<input type="text">。

但是，我仍然希望用户能够在这些表单字段中输入并看到他们的输入。

有什么方法可以使<input type="text">元素不可见，但仍保留其功能？

Answer 1

如果您希望用户查看他们键入的内容，则不能将不透明度设置为0。

隐藏所有关于输入的可见内容。

My name is <input name=name placeholder=John>.

Array
(
    [0] => Array
        (
            [job_card_id] => 1
            [repair_order_id] => 1
            [customer_request] => test customer request
            [qty] => 5
            [registration_no] => DL 17U 7113

        )

    [1] => Array
        (
            [job_card_id] => 1
            [repair_order_id] => 2
            [customer_request] => test customer request1
            [qty] => 5
            [registration_no] => DL 17U 7113
        )

    [2] => Array
        (
            [job_card_id] => 2
            [repair_order_id] => 4
            [customer_request] => test customer request
            [qty] => 5
            [registration_no] => DL 17U 6111
        )

    [3] => Array
        (
            [job_card_id] => 2
            [repair_order_id] => 5
            [customer_request] => test customer request1
            [qty] => 5
            [registration_no] => DL 17U 6111
        )

)

Answer 2

您可以先使用input:focus，然后再使用opacity:1;

input{
opacity:0;
}
input:focus{
opacity:1;
}

<span>input by my right side</span><input name=name placeholder="text here"/>

仅显示占位符/值：

使用border:none;

    input{
    border:none;
    }

<span>input by my right side:</span><input name=name placeholder="text here"/>

Answer 3

您也可以使用属性input代替contenteditable：

<div class="input" contenteditable="true">Replace this value...</div>

如何使<input type =“ text” />元素不可见，但仍显示用户输入？

3 个答案: