데이터 문제가 발생하지 않고 시각적으로 텍스트를 자르다

Question

나는 이것을 봤고 SO와 Programmers.stackexchange를 통해 열람했으며 언급을 찾지 못했습니다.

배경 : 나는 사용자와 디자이너가 나를 시각적 효과에 대한 업데이트 가능한 형태로 텍스트 I 출력을 절단하고 싶은 프로젝트에서 일하고 있어요. 입력 필드의 끝 부분에서 텍스트가 잘 리지 않게하고 상자의 텍스트를 상자의 길이에 맞게 표시하려고합니다.

문제점 : 문자열을 자르는 방법을 알고 있고 업데이트되지 않은 필드를 무시하도록 스크립트를 만드는 방법을 알고 있습니다. 어떻게 해야할지 모르겠지만 사용자가 필드 업데이트를 시작할 때 데이터 무결성을 유지해야합니다. 필드에 더 이상 전체 값이 포함되지 않기 때문에 데이터베이스를 업데이트 할 때 심각한 결함을 일으키는 것처럼 보입니다.

질문 : 나는 그들이 잘린 프리젠 테이션의 관점에서 원하는 무엇을 그 (것)들을 제공하고 그들이 그 입력을 편집하려고하면 각 입력의 전체 텍스트가 나타날 수 ... 또는 수있는 방법이 있나요 나는 돌아가서 "네가 원하는 것은 뭘 할 수 없니?"라고 말해야합니까? 나는 다른 제안들에 대해서도 열려 있습니다. :)

Answer 1

정확하게 이해한다면 여기에 몇 가지 문제점이 있습니다. 상대적으로 단순한 잘린 형태로 일부 데이터를 표시해야합니다. 또한 편집 된 데이터를 전체적으로 표시해야하며, 양식을 제출할 때 잘린 데이터를 전체 데이터로 대체하고 사용자가 변경 한 내용은 지우지 않도록해야합니다.

jQuery로이 작업을 수행 할 수 있습니다. 잘린 데이터를 표시하지만 .data()을 사용하여 전체 데이터를 저장하십시오. 또한 .data()를 사용하여 각 필드에 플래그를 저장하여 편집 여부를 알 수 있습니다. 필드가 포커스를 얻으면 전체 데이터를 표시합니다. 양식이 제출되면 각 필드의 플래그가 편집되었는지 확인하십시오. 있다면, 그냥 둡니다. 데이터가 편집되지 않은 경우 필드 내용을 제거하고 전체 길이 데이터를 교환하십시오. 그런 다음 양식을 제출하십시오.

잘라낸 데이터를 표시하고, 전체 데이터를 편집 할 수있게하며, 편집되지 않은 경우 잘린 데이터를 제출하지 않도록하십시오.

Answer 2

나는 당신이 text-overflow CSS 속성을 찾고있을 것이라고 생각합니다.

Answer 3

줄 바꿈 된 문자열과 전체 문자열을 포함하는 속성을 유지하고 표시 목적으로 잘린 문자열을 사용하는 선을 따라 뭔가를 생각해 보겠습니다. 양식 필드를 클릭하면 전체 문자열로 바꿀 수 있습니다. 변경 사항이 없으면 입력 값은 전체 문자열 특성과 일치합니다. 그 교장을 따라, 그들이 아무것도 바꾸지 않았다면, 그것을 잘린 문자열로 다시 대체하십시오.

편집 한 내용이 있으면 편집 한 속성을 동적으로 만들어 입력 필드에서 편집 한 버전의 문자열을 저장할 수 있습니다.

이 시점에서 기본적으로 몇 가지 간단한 속성 테스트/평등 확인이 될 것입니다.