Подсказки на компьютерную тематику

Можно подсмотреть, если забыли…

Как разрешить или запретить редактирование текста в браузере

Функции включения и выключения редактирования в браузере через html или javascript

    Для включения ввода текста напрямую в браузере, существуют следующие функции:

  • contentEditable – переключает режим редактирования для отдельных элементов, даже изначально не предназначенных для ввода текста
  • принимает значения true и false
  • по умолчанию имеет значение родительского элемента
  • document.designMode – переключает режим редактирования для всего документа
  • принимает значения on и off
  • по умолчанию имеет значение off
    Тонкости в использовании contentEditable и document.designMode:

  • в одном документе не рекомендуется использовать одновременно contentEditable и document.designMode из-за возможной некорректной работы
  • в тегах HTML вместо contenteditable = “true” можно использовать просто contenteditable
    <p contenteditable>Содержание текста, находится в теге p, этот абзац подключен к кнопке для редактирования</p>

Образец работающего кода с использованием contentEditable и document.designMode

<h1>Заголовок текста</h1>
<p>Содержание текста, находится в теге p, этот абзац подключен к кнопке для редактирования</p>

<script>
function edit(){

if(document.getElementsByTagName('p')[0].contentEditable !="true"){
document.getElementsByTagName('p')[0].contentEditable = "true";
}
else if(document.getElementsByTagName('p')[0].contentEditable != "false"){
document.getElementsByTagName('p')[0].contentEditable = "false";
}
alert(document.getElementsByTagName('p')[0].contentEditable);
}

function edit1(){
if(document.designMode == "on"){
document.designMode = "off";
}
else if(document.designMode == "off"){
document.designMode = "on";
}
alert(document.designMode);
}
</script>
<button onclick="edit()">Вкл/Выкл редактирования элемента страницы p</button>

<button onclick="edit1()">Вкл/Выкл редактирования всей страницы</button>

Как разрешить или запретить редактирование текста в браузере

Функции включения и выключения редактирования в браузере через html или javascript

    Для включения ввода текста напрямую в браузере, существуют следующие функции:

  • contentEditable – переключает режим редактирования для отдельных элементов, даже изначально не предназначенных для ввода текста
  • принимает значения true и false
  • по умолчанию имеет значение родительского элемента
  • document.designMode – переключает режим редактирования для всего документа
  • принимает значения on и off
  • по умолчанию имеет значение off
    Тонкости в использовании contentEditable и document.designMode:

  • в одном документе не рекомендуется использовать одновременно contentEditable и document.designMode из-за возможной некорректной работы
  • в тегах HTML вместо contenteditable = “true” можно использовать просто contenteditable
    <p contenteditable>Содержание текста, находится в теге p, этот абзац подключен к кнопке для редактирования</p>

Образец работающего кода с использованием contentEditable и document.designMode

<h1>Заголовок текста</h1>
<p>Содержание текста, находится в теге p, этот абзац подключен к кнопке для редактирования</p>

<script>
function edit(){

if(document.getElementsByTagName('p')[0].contentEditable !="true"){
document.getElementsByTagName('p')[0].contentEditable = "true";
}
else if(document.getElementsByTagName('p')[0].contentEditable != "false"){
document.getElementsByTagName('p')[0].contentEditable = "false";
}
alert(document.getElementsByTagName('p')[0].contentEditable);
}

function edit1(){
if(document.designMode == "on"){
document.designMode = "off";
}
else if(document.designMode == "off"){
document.designMode = "on";
}
alert(document.designMode);
}
</script>
<button onclick="edit()">Вкл/Выкл редактирования элемента страницы p</button>

<button onclick="edit1()">Вкл/Выкл редактирования всей страницы</button>