텍스트 영역의 끝에 고정 된 텍스트

Question

텍스트 영역의 텍스트 끝에 고정 된 기본 텍스트를 가져 오는 방법이 있습니까? 왜? 나는 트위터 stsatuses을 만들기위한 텍스트 영역을 가지고 있으며 결국에는 모든 사용자가 서명해야합니다. 그래서 나는 그것을 삭제할 수 없다는 본문에 가지고 싶습니다.

코드를 작성 하시겠습니까?

Answer 1

나는 이것이 너무 오래되었다고 생각하며, 당신이 질문에 대한 좋은 해결책을 가지고 있다면 나는 거의 같은 일을 여기에서하는 것처럼 생각한다. 그렇지 않다면 어쩌면 내 대답을 확인하고 싶을 것입니다 http://jsfiddle.net/index/tX44C/2/.

Answer 2

너무 오래 전에 비슷한 문제를 해결해야했습니다. 고정 텍스트 대신 트위터 텍스트 영역에 추가 할 수있는 작품 수를 제한하여 140 자 대신 110 자만 허용하도록 결정했습니다. 나는 이것을 클라이언트 측에서 jquery를 사용하여 시행했으며 서버 측에서도 검증했다. 귀하의 경우에는

아래와 같은 코드를 사용하지만 대체 :

tweet = $('#edit-tweet').val(); 

tweet = $('#edit-tweet').val() + 'Your Signature'; 

이 내가 클라이언트 측에서 사용되는 코드입니다 :

$(document).ready(function() { 

    var tweet_area = $('#edit-tweet'); 

    tweet_area.keyup(count_down); 

    count_down(); 

    dim(); 

    tweet_area.hover(highlight, dim); 

    }); 


/** 
* Count down function 
*/ 
function count_down() { 
    var left = 110 - $('#edit-tweet').val().length; 

    if (left < 0) { 
    left = 0; 
    limit_text(tweet); 
    } else { 
    tweet = $('#edit-tweet').val(); 
    } 
    $('#counter').text(' - ' + left); 
} 

/** 
* Limits the tweet text value to static sized tweet. 
* 
* @param tweet 
*   the static sized tweet 
*/ 
function limit_text(tweet) { 
    $('#edit-tweet').val(tweet); 
} 

/** 
* Callback for hover in function 
*/ 
function highlight() { 

    var tweet_style_focusin = { 
    'width' : '600px', 
    'height' : '50px', 
    'border' : '3px solid #cccccc', 
    'padding' : '5px', 
    'font-family' : 'Tahoma, sans-serif', 
    'background-image' : 'url(bg.gif)', 
    'background-position' : 'bottom right', 
    'background-repeat' : 'no-repeat' 
    }; 

    $(this).css(tweet_style_focusin); 

    $(this).focus(); 

} 

/** 
* Callback for hover out function 
*/ 
function dim() { 
    var tweet_style_foucsout = { 
    'width' : '600px', 
    'height' : '50px', 
    'border' : '1px solid #cccccc', 
    'padding' : '5px', 
    'font-family' : 'Tahoma, sans-serif', 
    'background-image' : 'url(bg.gif)', 
    'background-position' : 'bottom right', 
    'background-repeat' : 'no-repeat' 

    }; 

    $('#edit-tweet').css(tweet_style_foucsout); 
} 

Answer 3

이것이 가능하다고 생각하지 않지만 다른 접근 방식을 사용합니다. 메인 텍스트의 텍스트 영역 아래에서 비활성화 된 텍스트 영역 또는 단순히 div를 추가 할 수 있습니다.

<textarea name="blabla"><textarea> 
<div class="signature">signature</div> 

그리고 백엔드에서 작업하는 것보다.

귀하의 사용법을 잘 모릅니다.

따라서이 같은 PHP는 무엇인가 : 사용자가 어떠한 방식으로 서명을 변경할 수 없습니다

def some_action 
    params[:blabla] << signature 
end 

이 방법 :

<?php $_POST['blabla'] .= $signature ?> 

에서이 같은 레일. 작동하는 jQuery 솔루션을 찾더라도 사용자가 서명을 변경할 수있는 것보다 사용자가 자바 스크립트 코드를 변경하거나 완전히 비활성화 할 수 있기 때문에 항상 안전하지 않습니다.

IMHO 서버 측 접근 방식이이를 수행하는 가장 좋은 방법입니다.

Answer 4

textarea 아래 정확히 같은 너비의 div을 만듭니다. 테두리와 배경이 일관성을 유지하는지 확인하고 textarea의 아래쪽 테두리와 CSS를 사용하는 div의 위쪽 테두리를 제거하여 가능한 한 많이 단색 모양으로 보이게하려고합니다. textarea