2013-07-29 3 views
-2

Скажет, у меня есть следующий HTML:Изменения содержания DOM текстового узла

<div>Some text</div> 

Я желающий удалить последний символ из текста каждый раз, когда пользователь нажимает клавишу возврата. Есть ли способ удалить символ из текстового узла? Или мне нужно сделать что-то вроде obj.innerText = 'Some tex' (т. Е. Обрезать последний символ и заменить все это).

+0

Вы должны изучить несколько фреймворков/библиотек, в которых есть такие привязки к образцовой модели, которые выпекались. Http://angularjs.org/ или http://knockoutjs.com/, чтобы назвать несколько. – Ken

+1

Вы пробовали ['contenteditable'] (https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable)? –

ответ

0

Лучший способ, который я могу придумать с головы, состоит в использовании метода substring для строк.

var s = obj.innerText 

// Then On backspace event listener 
s = s.substring(0, s.length - 1) // returns s without the last character in the original string. 

obj.innerTezt(s) // set the inner HTML back to s 

Редактировать: спасибо Джонатан, Деннис за исправление этого ответа!

+3

У вас есть основная идея, но несколько вопросов: 1) ['textContent'] (https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent) - стандартизованное свойство и будет должны быть смешаны с 'innerText' для устаревшей поддержки. 2) 's' не является * указателем * на' obj.innerText'; это копия. Установка его не повлияет на 'obj.innerText' (или' obj.textContent'). –

+0

Хороший улов! Вы правы, Джонатан - я пропустил последний бит, который ему придется снова установить innerText/innerHTML после получения подстроки! –

+1

'innerHTML' не является функцией – Dennis

0
var div = document.getElementById('my-div'); 
document.addEventListener('keydown', 
    function(e) { 
     if (e.which === 8) { 
      div.textContent = div.textContent.substring(0, div.textContent.length - 1); 
     } 
    }, false); 

Возможно, вы также захотите поддержать IE8. В этом случае используйте document.attachEvent() и div.innerText.

Смежные вопросы