<входной тип = “текст”> помощник (постепенно исчезает текст, когда пользователь вводит), JavaScript

Question

<входной тип = “текст”> помощник (постепенно исчезает текст, когда пользователь вводит), JavaScript

Я хочу добавить полезный текст (в JavaScript БЕЗ ЛЮБОГО ИСПОЛЬЗОВАНИЯ ПЛАТФОРМЫ) в полях ввода text и textarea почти не знайте что его названный

Поскольку это используется в me.com, но я не хочу отправлять значения, которые используются в качестве помощников.

Извините за плохой английский язык.

Спасибо.

6

javascript html

задан Glorfindel 13 June 2019 в 19:06

2 ответа

Попробуйте следующее:

<input type="text" name="member_name" value="Member Name" onFocus="field_focus(this, 'Member Name');" onblur="field_blur(this, 'Member Name');" />

Конечно, вы хотите создать пароль типа ввода для поля пароля, поэтому это не будет полезно для текстового поля пароля.

Вы также можете заключить это в функции, если имеете дело с несколькими полями:

<script type="text/javascript">
  function field_focus(field, text)
  {
    if(field.value == text)
    {
      field.value = '';
    }
  }

  function field_blur(field, text)
  {
    if(field.value == '')
    {
      field.value = text;
    }
  }

</script>

3

ответ дан 8 December 2019 в 17:21

Другие вопросы по тегам:

javascript html

Похожие вопросы:

score 2 · Accepted Answer

Я нашел, что лучший способ решить эту проблему - использовать <лейбл> и расположить его над входной областью. Это дает вам:

Больше эстетической свободы
Сохраняет семантику вашей страницы
Позволяет вам грациозно ухудшать
Не вызывает проблем, отправляя подсказку в качестве входного значения или беспокоясь об управлении этой проблемой

Вот ванильная версия, так как вы просили не использовать фреймворк. Разметка не должна меняться, но вам может понадобиться настроить CSS для работы с вашими потребностями.

HTML:

<html>
<head>
    <style>
    label.magiclabel {
        position: absolute;
        padding: 2px;
    }
    label.magiclabel,
    input.magiclabel {
        width: 250px;
    }
    .hidden { display: none; }
    </style>

    <noscript>
        <style>
            /* Example of graceful degredation */
            label.magiclabel {
                position: static;
            }
        </style>
    </noscript>
</head>
<body>
<label>This is not a magic label</label>

<form>
    <label class="magiclabel" for="input-1">Test input 1</label>
    <input class="magiclabel" type="text" id="input-1" name="input_1" value="">

    <label class="magiclabel" for="input-2">Test input 2 (with default value)</label>
    <input class="magiclabel" type="text" id="input-2" name="input_2" value="Default value">
</form>

<script src="magiclabel.js"></script> 
</body>
</html>

vanilla-magiclabel.js

(function() {
    var oldOnload = typeof window.onload == "function" ? window.onload : function() {};

    window.onload = function() {
        // Don't overwrite the old onload event, that's just rude
        oldOnload();
        var labels = document.getElementsByTagName("label");

        for ( var i in labels ) {
            if (
                // Not a real part of the container
                !labels.hasOwnProperty(i) ||
                // Not marked as a magic label
                !labels[i].className.match(/\bmagiclabel\b/i) ||
                // Doesn't have an associated element
                !labels[i].getAttribute("for")
            ) { continue; }

            var associated = document.getElementById( labels[i].getAttribute("for") );
            if ( associated ) {
                new MagicLabel(labels[i], associated);
            }
        }
    };
})();

var MagicLabel = function(label, input) {
    this.label = label;
    this.input = input;

    this.hide = function() {
        this.label.className += " hidden";
    };

    this.show = function() {
        this.label.className = this.label.className.replace(/\bhidden\b/ig, "");
    };

    // If the field has something in it already, hide the label
    if ( this.input.value ) {
        this.hide();
    }

    var self = this;

    // Hide label when input receives focuse
    this.input.onfocus = function() {
        self.hide();
    };

    // Show label when input loses focus and doesn't have a value
    this.input.onblur = function() {
        if ( self.input.value === "" ) {
            self.show();
        }
    };

    // Clicking on the label should cause input to be focused on since the `for` 
    // attribute is defined. This is just a safe guard for non-compliant browsers.
    this.label.onclick = function() {
        self.hide();
    };
};

Vanilla demo

Как видите, около половины кода завернуто в инициализацию в window.onload. Это можно смягчить с помощью фреймворка. Вот версия, использующая jQuery:

$(function() {
    $("label.magiclabel[for]").each(function(index, label) {
        label = $(label);
        var associated = $("#" + label.attr("for"));

        if ( associated.length ) {
            new MagicLabel(label, associated);
        }
    });
});

var MagicLabel = function(label, input) {
    // If the field has something in it already, hide the label
    if ( input.val() !== "" ) {
        label.addClass("hidden");
    }

    label.click(function() { label.addClass("hidden"); });
    input.focus(function() { label.addClass("hidden"); });
    input.blur(function() {
        if ( input.val() === "" ) {
            label.removeClass("hidden");
        }
    });
};

jQuery demo. Разметка не нуждается в изменении, но, конечно, вам нужно включить библиотеку jQuery.