Устранить конечные пробелы из электронной почты HTML - PullRequest
Новая
       10

Устранить конечные пробелы из электронной почты HTML

0 голосов
/ 12 июня 2018

Я кодирую шаблон электронной почты в формате HTML, который предоставляет нашим пользователям временный пароль для входа в свою учетную запись.Однако я пытаюсь избавиться от конечных пробелов, которые обычно добавляются в элементы электронной почты HTML, поэтому, если пользователь выбирает строку, он может просто скопировать пароль без лишних символов.

Я попытался использоватьэлемент div для переноса пароля, так как это избавляет от пробелов, но, тем не менее, если пользователь щелкает и перетаскивает для выбора (в отличие от двойного щелчка), дополнительный пробел все еще выбирается, например:

enter image description here

Вот код: 

...
<tr>
    <td align="center">
        <div>myTempPassword</div>
    </td>
</tr>
....

Чтобы воспроизвести эту проблему, убедитесь, что вместо двойного щелчка по элементу div, вы щелкаете перед началом строки и перетаскиваете мышьвплоть до правого.Теперь выбирается не только div с текстом, но и некоторое дополнительное пространство после него.

Второе решение, которое я попытался, состояло в том, чтобы превратить текст пароля в невидимое поле ввода, поэтому, когда пользователь пытается выбрать его, выбран только текст внутри этого поля ввода.Я также сделал его доступным только для чтения, чтобы пользователи не пытались печатать на нем.Сначала это работало прекрасно, за исключением некоторых почтовых клиентов, таких как Android Mail, область паролей показывает мигающий курсор, поскольку клиентское программное обеспечение пытается рассматривать его как поле ввода.

Вот код для этого: 

...
<tr>
    <td align="center">
        <input readonly="readonly" class="pw-input" style="width: 270px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 30px; color: #EA1675; border: none;"
                                                                    type="text" value="myTempPassword" />
    </td>
</tr>
....

Чтобы исправить эту проблему, я попытался установить свойство курсора с помощью CSS, но большинство мобильных почтовых клиентов не поддерживают это свойство.

Есть ли у меня другие предложения:

1) Избавиться от мигающего курсора в моем поле ввода, не используя CSS-свойство курсора ...

или

2) Использовать другой метод для удаления завершающего пробела из пароля, когда пользователь щелкает и перетаскивает для выбора?

Спасибо!

Ответы [ 4 ]

0 голосов
/ 22 февраля 2019

Была та же проблема с той же ситуацией, когда отправлялись пользователи временного pwd и добавляли br разрыв строки фиксированный конечный пробел: 

<p>
    <strong>User Name:</strong> ^^param_uid^^<br>
    <strong>Temporary Password:</strong> ^^param_pwd^^<br>
</p>

hth, ура ....

0 голосов
/ 13 июня 2018

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

Попробуйте выделить оба текста ниже, и увидите эффект

<div>
  mytempPassword
</div>
<div>mytempPassword</div>
0 голосов
/ 13 июня 2018

Я решил это намного проще, чем думал.Код ниже: 

<tr style="font-size:0;">
    <td style="font-size:0;" align="center">
        <div style="font-size:0;"><a style="font-size: 30px; text-decoration:none;">{{htmlescape var=$customer.password}}</a></div> 
    </td>
</tr>
0 голосов
/ 12 июня 2018

Конечный пробел отображается для некоторых пользователей, а не для других в зависимости от их браузера и / или ОС.Например, я скопировал ваш HTML и не получил конечный пробел.Из-за этого я не рекомендовал бы учитывать это, потому что это может показаться немного странным для людей, которые его не понимают.

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

var element = document.getElementsByClassName('pw-input')[0];
element.style.width = parseInt(window.getComputedStyle(element).getPropertyValue('width'))-10;

Если вы хотите, вы можете установить свойство overflow-x на видимое, чтобы текст выглядел одинаково, или выможно настроить его на прокрутку, потому что пользователь все равно будет копировать текст, поэтому не имеет значения, смогут ли они прочитать все это.

...