表单字段（默认文本）+更多文本

I have a form field with default text, but my users have to paste a filename after this default text. How can I achieve that?

我有一个带默认文本的表单字段,但我的用户必须在此默认文本后粘贴文件名。我怎样才能做到这一点?

/td><th width="200px">VideoLink</th><td><input type="text" id="VideoLink" name="VideoLink" value="<?php echo $video_rec['VideoLink']; ?>"></input></td>

$video_rec['VideoLink'] = "rtmp://test123.cloudfront.net/cfx/st/mp4:";

My user has to paste the filename in that form field, but when the form is submitted that field should contain rtmp-url + filename (test.mp4) Sample = rtmp://test123.cloudfront.net/cfx/st/mp4:TEST.mp4

我的用户必须在该表单字段中粘贴文件名,但是在提交表单时该字段应包含rtmp-url + filename(test.mp4)Sample = rtmp://test123.cloudfront.net/cfx/st/mp4: TEST.mp4

I did check this solution How to keep some default text in the input field?, but when i right click to paste it removes the default text.

我确实检查了这个解决方案如何在输入字段中保留一些默认文本?,但是当我右键单击粘贴它时会删除默认文本。

2 个解决方案

#1

Something like this:

像这样的东西:

HTML:

<input type="text" id="defaultLink" name="defaultLink" class="defaultLink" 
    value="rtmp://test123.cloudfront.net/cfx/st/mp4:" disabled />
<input type="text" id="videoLink" name="videoLink" />
<input type="hidden" id="completeLink" name="completeLink" />

<input type="button" onclick="appendLink();" value="Append" />

CSS:

.defaultLink {
    min-width: 235px;
    border: none;
    background-color: transparent;
}

JS:

function appendLink(){
    var defaultLink = document.getElementById('defaultLink').value;
    var videoLink = document.getElementById('videoLink').value;    
    var completeLink = defaultLink + videoLink;

    alert(completeLink);

    document.getElementById('completeLink').value = completeLink;

}

Then, you can get complete URL from completeLink request attribute / parameter.

然后,您可以从completeLink请求属性/参数中获取完整的URL。

DEMO

#2

You shouldn't trust your users to provide correct input, let them paste as they wish, you can guide them with a note or label, ex. please include the "rtmp://" bit but ultimately you should validate the input server side.

你不应该相信你的用户提供正确的输入,让他们按照自己的意愿粘贴,你可以用笔记或标签引导他们,例如。请包含“rtmp://”位,但最终您应验证输入服务器端。

You can try this:

你可以试试这个:

$string = 'rtmp://test123.cloudfront.net/cfx/st/mp4:TEST.mp4';

//$string = 'test123.cloudfront.net/cfx/st/mp4:TEST.mp4';

// make sure to also strip any leading or trailing whitespace using trim()
// you can also process the input string even further before testing the protocol

if (!stripos($string)){
    $url = 'rtmp://' . trim($string);
}
else{
    $url = trim($string);
}

print $url;

#1