Есть некоторый JavaScript, который вы можете использовать. Если вы не используете фреймворк, он будет выглядеть довольно уродливо, потому что это не тривиально.
Событие JavaScript keypress срабатывает при нажатии клавиши, но не срабатывает для клавиш курсора (по некоторым причинам). Это очень удобно, потому что если вы используете JavaScript для предотвращения действия по умолчанию, вы сортируетесь.
Так что в идеале это было бы то, что вам нужно:
// get all readonly inputs
var readOnlyInputs = document.querySelectorAll('input[readonly]');
// Function to fire when they're clicked
// We would use the focus handler but there is no focus event for readonly objects
function readOnlyClickHandler () {
// make it not readonly
this.removeAttribute('readonly');
}
// Function to run when they're blurred (no longer have a cursor
function readOnlyBlurHandler () {
// make it readonly again
this.setAttribute('readonly');
}
function readOnlyKeypressHandler (event) {
// The user has just pressed a key, but we don't want the text to change
// so we prevent the default action
event.preventDefault();
}
// Now put it all together by attaching the functions to the events...
// We have to wrap the whole thing in a onload function.
// This is the simplest way of doing this...
document.addEventListener('load', function () {
// First loop through the objects
for (var i = 0; i < readOnlyInputs.length; i++) {
// add a class so that CSS can style it as readonly
readOnlyInputs[i].classList.add('readonly');
// Add the functions to the events
readOnlyInputs[i].addEventListener('click', readOnlyClickHandler);
readOnlyInputs[i].addEventListener('blur', readOnlyBlurHandler);
readOnlyInputs[i].addEventListener('keypress', readOnlyKeypressHandler);
}
});
Просто скопируйте и вставьте это, и оно должно нормально работать в Firefox или Chrome. Код соответствует стандартам , а Internet Explorer - нет. Так что это не будет работать в IE (кроме, может быть, версий 9 и 10 ... не уверен насчет этого). Кроме того, бит classList.add не будет работать во всех, кроме некоторых из самых последних версий браузеров. Таким образом, мы должны изменить эти биты. Сначала мы адаптируем функцию readOnlyKeypressHandler, потому что event.preventDefault() работает не для каждого браузера.
function readOnlyKeypressHandler (event) {
if (event && event.preventDefault) {
// This only runs in browsers where event.preventDefault exists,
// so it won't throw an error
event.preventDefault();
}
// Prevents the default in all other browsers
return false;
}
Теперь изменим бит classList.
// add a class so that CSS can style it as readonly
if (readOnlyInputs[i].classList) {
readOnlyInputs[i].classList.add('readonly');
} else {
readOnlyInputs[i].className += ' readonly';
}
Досадно, но addEventListener не поддерживается и в IE, поэтому вам нужно создать функцию для обработки этого отдельно (добавить ее над циклом for)
function addEvent(element, eventName, fn) {
if (element.addEventListener) {
element.addEventListener(eventName, fn, false);
} else if (element.attachEvent) {
// IE requires onclick instead of click, onfocus instead of focus, etc.
element.attachEvent('on' + eventName, fn);
} else {
// Much older browsers
element['on' + eventName] = fn;
}
}
Затем измените бит добавления событий:
addEvent(readOnlyInputs[i], 'click', readOnlyClickHandler);
addEvent(readOnlyInputs[i], 'blur', readOnlyBlurHandler);
addEvent(readOnlyInputs[i], 'keypress', readOnlyKeypressHandler);
И дать функции загрузки документа имя вместо вызова в addEventListener:
function docLoadHandler () {
...
}
И позвони в конце
addEvent(document, 'load', docLoadHandler);
И как только вы это сделаете, он должен работать во всех браузерах.
Теперь просто используйте CSS для стилизации класса readonly, чтобы убрать контур в браузерах, которые его отображают:
.readonly:focus {
outline: none;
cursor: default;
}