Блог

Мне был предоставлен старый проект, созданный в asp, и мне нужно сделать одно из текстовых полей доступным только для чтения (потому что оно заполняется выпадающим списком и не должно допускать никаких свободных текстовых записей). Это было бы просто вырезать и высушить, чтобы установить атрибут ReadOnly = «True» . , , за исключением того, что, похоже, в keppress есть какая-то функция js, которая не позволяет работать атрибуту только для чтения. У меня очень мало опыта и знаний в JS, и поэтому я не понимаю, как решить — что должно быть простым изменением.

Я попытался добавить атрибут ReadOnly к True в html, но произошло что-то странное. Когда пользователь вводит текст в поле, текст появляется в поле, но они не могут его удалить. Итак, это говорит мне о том, что оно частично работает, но происходит что-то еще.

Затем я просмотрел исходный код из фактического просмотра страницы (в браузере), и именно там я увидел запуск события kepress . , (onkeypress=»return TheControl.RY(this, event);»). Потому что это не отображалось в моем файле ascx.

Короче говоря . . атрибут ReadOnly терпит неудачу, потому что запускается что-то onkeypress . , , (a) Я не совсем понимаю, что делает JS, или как сделать поле доступным только для чтения.

Это код текстового поля в файле .ascx

  <span class="ComposeHeaderValue">
                <asp:TextBox runat="server"     ID="ToTextBox" TabIndex="1" ReadOnly="true" />
            </span>
  

Но когда я просматриваю исходный код из браузера, это html:

  <span class="ComposeHeaderValue">
                <input name="TheControl$ToTextBox" type="text" readonly="readonly" id="TheControl_ToTextBox" tabindex="1" onkeypress="return TheControl.RY(this, event);" />
            </span>
  

У меня нет никакого опыта работы с JS, но похоже, что он вызывает событие (RY) onkeypress . . итак, я нашел что-то под названием RY в одном из файлов js, и это то, что у него есть

   RY: function Rockliffe_MailSite_Web_UI_Client_ComposeControl_ComposeControl$RY(lV, nd) {
    this.lR('ComposeControl', 'RY', lV.id   ','   nd);
    if (!this.na) {
        return true;
    }
    return this.pg.Cu(lV, nd);


 },
  

И я понятия не имею, что происходит в этом коде. Я попытался добавить изменение атрибута в JS RY . , , но это не сработало. Это то, что я пробовал:

     RY: function  Rockliffe_MailSite_Web_UI_Client_ComposeControl_ComposeControl$RY(lV, nd) {
    this.lR('ComposeControl', 'RY', lV.id   ','   nd);
    if (!this.na) {
        return true;
    }
    return this.pg.Cu(lV, nd);

    document.getElementById('ToTextBox').readOnly = true;
 },
  

Если я не могу найти способ сделать текстовое поле доступным только для чтения … из-за события нажатия клавиши, как мне отключить событие нажатия клавиши? Теоретически, если текстовое поле доступно только для чтения, события нажатия клавиши никогда не будет??

Работа с решением, предоставленным Archer . . . . это мой обновленный код, который все еще не работает должным образом

         <div class="ComposeHeaderLine">
            <WebUtils:IconButton runat="server" id="ToComposeButton" style="float:left"/>
            <span class="ComposeHeaderValue">
                <asp:TextBox runat="server" ID="ToTextBox" TabIndex="1" ReadOnly ="true" />
            </span>
        </div>
  

И в самом низу страницы я добавил следующее

 <script type="text/javascript">

function onKeyPress(textbox, event) {
textbox.value  = event.key;
}

document.getElementById("ToTextBox").removeAttribute("onkeypress");
</script>
  

Не уверен, правильно ли я настроил JS????

Новое редактирование

Хорошо, итак … в моем asp-коде текстовое поле НЕ имеет события onkeypress. Но, когда я просматриваю исходный код в веб-браузере, он показывает событие onkeypress . , , и мне интересно, есть ли что-то в этом.

 "return TheControl.RY(this, event);"

<input name="TheControl$ToTextBox" type="text" readonly="readonly"   id="TheControl_ToTextBox" tabindex="1" onkeypress="return TheControl.RY(this,  event);" />
  

У меня есть два вопроса. Используя приведенный Арчером пример . . .

1. Имя его функции — onKeyPress. Итак, я должен переименовать свою функцию в «return TheControl.RY (this, event);» ???

2. Должна ли строка кода getElement находиться в скобках или после? Арчер показывает это после … но я не понимаю, почему это не в скобках?

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

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

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

 function onKeyPress(textbox, event) {
  textbox.value  = event.key;
}

// remove the event handler from textbox2
document.getElementById("textbox2").removeAttribute("onkeypress");  

 <input id="textbox1" type="text" readonly="readonly" onkeypress="onKeyPress(this, event)" placeholder="You can type in me" />
<br /><br />
<input id="textbox2" type="text" readonly="readonly" onkeypress="onKeyPress(this, event)" placeholder="You can't type in me" />  

Вам просто нужно добавить одну строку Javascript на вашу страницу (и изменить соответствующий идентификатор).

Единственное предостережение заключается в том, что строка кода, которая удаляет обработчик события нажатия клавиши, должна выполняться после того, как обработчик был добавлен сторонним кодом. В идеале, просто вставьте его в тег script в самом низу тела.